StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I recommend against using classes if you're not going to associate the class with the image. (<em>which would be the most correct way</em>) What I would do instead is put a link to the image in the rel tag. </p> <p>This does what you want, and will still validate as valid css. </p> <pre><code><div class="button" rel="images/star.jpg">iconStar</div> <div class="button" rel="images/plus.jpg">iconPlus</div> <div class="button" rel="images/left.jpg">iconLeft</div> <div class="button" rel="images/right.jpg">iconRight</div> <div class="button" rel="images/up.jpg">iconUp</div> <div class="button" rel="images/down.jpg">iconDown</div> <script> $('.button').each(function() { $(this).append("<img src='"+$(this).attr('rel')+"'>"); }); </script> </code></pre> <p>See the example here: <a href="http://jsbin.com/acasu" rel="nofollow noreferrer">http://jsbin.com/acasu</a></p> <p>Note, if you're using a lot of tiny images, you're going to want to use <a href="http://www.alistapart.com/articles/sprites" rel="nofollow noreferrer">CSS Sprites</a>. As it will greatly improve the performance of your page.</p> <p>If you absolute had to do it the way you are suggesting, you could do the following:</p> <pre><code>$(".button[class^='button icon']").each(function() { var iconSrc = $(this).attr('class').substr("button icon".length) $(this).append("<img src='/images/"+iconSrc+".jpg'>"); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload