CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea

184 Reader Comments

Back to the Article
  1. Thanks Dave.  You’re work has, yet again, helped move us in better direction.

    Copy & paste the code below to embed this comment.
  2. .. that CSS are the present and future of the Web.

    Copy & paste the code below to embed this comment.
  3. I’m constantly surprised at the ways in which CSS can be manipulated to great visual effect. It takes people like Dave, Doug, Søren, et al, to keep that CSS cutting edge as sharp as it is. Excellent work.

    Copy & paste the code below to embed this comment.
  4. Or rather, “Dave, Doug, Søren, et al”. Ahem.

    Copy & paste the code below to embed this comment.
  5. Genius!

    (The final green shape needs a tweak though. When hovering in Mozilla 1.5 on XP, the neighbouring grey shape edges out a touch.)

    The introduction to this article reminded me of Boulderdash on the Commodore 64. That early games computer had several character grids you could hold in memory. Boulderdash cleverly switched between these several times every second to give the effect of animation. I once looked into the code and saw an earlier abandoned character set, with much cruder designs. Why is this important? Er, it’s not, but I thought I’d mention it.

    Also the Commodore had built-in hardware sprites, which floated over the main character data used to make a screen. If only we had those in CSS

    Copy & paste the code below to embed this comment.
  6. The 2 separate active maps for the overlapping shapes is one of those now obvious, simple ideas I wouldn’t have thought of. Thanks for saving the headache.

    As Chris Hester above said, the left green crescent is a bit off (tested in both Firefox and IE6). Not sure at first glance whether it’s a positioning or a graphics problem.

    Also, to nitpick, a slight advantage to saving individual rollovers for graphics (at least in GIF form) is the ability for each image to have it’s own set of 256 colors. It’s not unlikely, given sufficiently colorful images, that the 256 color limitation involved in placing all active and non-active states for multiple buttons in one GIF could visually degrade the overall effect.

    Copy & paste the code below to embed this comment.
  7. I think the best part about this is the ability to degrade on non-CSS browsers, as the images themselves are merely list items.

    Aaah, behold the power of unordered lists!

    Copy & paste the code below to embed this comment.
  8. Ofcourse, using one image cuts down the number of http requests to the server, for each image.

    In some cases i would expect that this would make up for an increase in file size.

    I can think of several places i have used 10+ gif icons, which would probably have been faster as one image positoned using css

    Copy & paste the code below to embed this comment.
  9. … and very apt title too. :)

    Looks like my weekend of not being glued to the computer doing (X)HTML+CSS stuff is out the window…

    Copy & paste the code below to embed this comment.
  10. Very nice work.  I like the idea of CSS image maps. :-)

    Copy & paste the code below to embed this comment.
  11. Nice write up with some good examples. Thanks Dave.

    This basic idea had occurred to me a while ago for just the reason that Dave Marks mentions in his comment above. I was going to demonstrate it by doing Amazon’s nav bar in CSS with one master image. Needless to say, I didn’t get round to it. Such a simple nav bar lends itself perfectly to this technique.

    I have seen this technique (or a variation of it) in use already:

    http://www.smithpaul.com/archives/2004/03/03/indepth_css_sidebar_titles.php”

    However, it breaks if you resize the text – so you need to stick to images.

    Copy & paste the code below to embed this comment.
  12. Good, well written, expansion on a well known technique, and as already pointed out, your demonstration shows good examples.

    In regard to single image vs lots of images…
    1) As already mentioned there will be some memory saved by combining images that share the same pallet.
    2) In particular, GIF images can store long solid-colour horizontal lines in very small memory space.
    3) Splitting in to many images allows most peoples web browsers to download them faster because they can be downloaded simultanseously (only helps of fast connections).
    4) I may have missed it in the article, but I don’t think you mentioned the main reason for having a single image, is if you had a different ‘after’ image, it would not start downloading intil you hover over it, (So putting the before and after images in a single file removes the need for a JavaScript ‘pre-loader’).

    Here’s another example of this technique in use: http://www.alpha-matrix-design.co.uk
    I’d welcome comments and constructive criticism, but direct it to me not to this discussion board.

    Copy & paste the code below to embed this comment.
  13. Yet again, I am blown away by the amazing power of CSS. Thank you for illuminating this technique. I am sure there are many who will find amazing ways to use this.

    Copy & paste the code below to embed this comment.
  14. I checked out the example with the skyline and nothing happened.  Maybe a settings issue?

    Copy & paste the code below to embed this comment.
  15. that’s all I can say. It is sexy!

    Copy & paste the code below to embed this comment.
  16. Not seeing anything spiffy about the skyline in Camino either.

    Copy & paste the code below to embed this comment.
  17. Thanks all for the feedback so far!

    To those experiencing browser discrepencies—it’s possibly related to cache. If you’ve configured your browser to ‘Check for new page every time’ or similar, it may be trying to re-download the image for every hover. Leave your mouse over the link a bit longer, give it a chance to show up, and it should.

    Also keep in mind that this is mostly a developer setting. End users won’t usually have this selected, so you needn’t worry about it too much.

    Copy & paste the code below to embed this comment.
  18. A number of folks mention that this technique degrades nicely. When people say as such, are they including browsers like Netscape 4.x?

    I am just curious because this technique doesn’t degrade well at all with Netscape 4.79.

    I’m still learning and justed wanted some clarification in this regard. Thanks.

    Copy & paste the code below to embed this comment.
  19. Lovely concept Dave, but I’m showing the re-download for every cache setting: always, auto, never… the hover-delay hounds me. It’s unnatural. IE6, Win2K

    Copy & paste the code below to embed this comment.
  20. Great work Dave.  Well-written, great examples, everything in there was extremely well done.

    I’ll definitely be saving this article for future use.  The irregular shapes will come in handy some day – not sure when, but it’s only a matter of time. :)

    Copy & paste the code below to embed this comment.
  21. I’ve seen Pixy’s hover technique, and I’ve built a couple sprite engines in my lifetime.  I don’t know why this didn’t occur to me.  Very cool.

    I can imagine several uses for this other than hover effects…  I’ll try a few things and see what I come up with.

    Copy & paste the code below to embed this comment.
  22. Along with Doug Bowman’s sliding doors article, easily the best thing I’ve read on here since the relaunch. I look forwards to your next article.

    I definately plan to use this on the new lastfield site to replace the highlighting UK map we use on our contact page.

    Copy & paste the code below to embed this comment.
  23. For Jason. M…

    Perhaps they don’t appear to be degrading well as Dave hasn’t put the list text in any of his examples? If the text was there, then you would see a fine unordered list, or at least you should be able to.

    Perhaps Dave would consider adding list text to his final examples to demonstrate how it degrades?

    Copy & paste the code below to embed this comment.
  24. The big difference is where we position the <li>s; the goal is to surround each graphical element with a box that tightly hugs the edges.

    I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!

    Any idea why this works? Could it be that if it’s not clear which box you want, the browser simply does nothing?

    Very nice!

    Copy & paste the code below to embed this comment.
  25. Here’s a test case with actual text in each link for the benefit of testing in NN4.x. Note that I’ve used Phark image replacement here, which doesn’t work in IE5.

    “I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!”

    Whichever link has a higher z-index gets priority—so in a corner where two boxes overlap, in this case the one that appears later in the source code is the one that gets triggered, and the other is ignored. You can pick and choose which links get priority by explicitly setting a z-index value, but I decided to just let them fight it out in my examples.

    Copy & paste the code below to embed this comment.
  26. Damn, doesn’t seem to work fully in Mozilla 1.6 on XP. (I used 1.5 before.) The two examples, one with “borders turned on”, do nothing. Yet the final “So there you have it” version does work!

    Same result in Firefox 0.8.

    Copy & paste the code below to embed this comment.
  27. I’ve done something alike with javascript mouse-overs and not slicing the images up, but I never seen it done with CSS before.

    Eric Meyer’s famous spiralling shelve demo springs to mind, but this one actually works in IE!

    One mayor plus using larger images is that once the two images are loaded, the caching of the images make the rollovers fast, while pages with a lot of sliced up images tend to have a small delay.

    Copy & paste the code below to embed this comment.
  28. Chris—the examples you cited weren’t meant to work at that point in the narrative; only the final examples in each section are fully functioning with mouseovers.

    Martijn—funny you should mention the Complex Spiral, I considered rebuilding it with background-image positioning for this article, but decided that was too much of a tangent. I think it can be done, it just wouldn’t end up fixed-position.

    Copy & paste the code below to embed this comment.
  29. I’ll just add to the compliments, I really like your code, its very clean and elegant and it degrades nicely.

    Bravo!

    Copy & paste the code below to embed this comment.
  30. Great article, it lacks a bit in code originality, since it uses lot of the latest articles’ code (Image maps, rollovers, FIR, etc), but it certainly gives users a lot of ideas and code examples. It’s what everyone who reads ALA has been thinking of doing once, but never came round to. A really useful reference, definately a keeper.

    “I think it can be done, it just wouldn’t end up fixed-position.”

    Wouldn’t you just use the combination of these two rules:

    background-attachment: fixed;
    and
    background-position: -10px -20px; (example values)

    Copy & paste the code below to embed this comment.
  31. I see no obvious reason why buttons like in the icon example couldn’t be spread across the content.  Not that doing such is a good idea from a usability standpoint, but you could make even 2 different sets of buttons and still use the one master image idea, right?  You’d just have to reposition accordingly.

    Gifs were used in the example but as long as the individual images were kept small is there any particular reason to avoid jpgs?  My thinking here is I’m currently building a site that will have several photo galleries of about 12 thumbnails each.  If I want to go with a rollover effect for each thumbnail (say a sepia toned image and a full color image), would the bandwidth benifits of this technique still apply to the use of jpgs?  Again, I don’t see any obvious reason that it wouldn’t, but I’ve learned not to assume too much.

    Copy & paste the code below to embed this comment.
  32. It’s the usual:
    ALA avoiding the serious questions for stuff like this.

    I don’t really care anyway.

    Copy & paste the code below to embed this comment.
  33. …then why are you here?

    Great article Dave.

    Copy & paste the code below to embed this comment.
  34. Anyways, blobs! Awesome article, it’s always the simplest things we stumble across which end up being the most useful.

    Copy & paste the code below to embed this comment.
  35. really, this article just amazes me how with some little ideas you can make them more applicable in various ways.

    Copy & paste the code below to embed this comment.
  36. I have been using this method for my nav links for a while and it works wonderfully.

    I never thought of using it for irregular shapes in that manner.

    Great work!

    I always love to have a great place to point questions on this subject too.

    Copy & paste the code below to embed this comment.
  37. Why does everyone use LIs when they are not neccessary? It’s extra markup for no reason!

    Copy & paste the code below to embed this comment.
  38. as each image must be verified before download. Could save quite a bit of time for many icons or images.

    Copy & paste the code below to embed this comment.
  39. Why does everyone use LIs when they are not neccessary? It’s extra markup for no reason!

    Because, if we’re talking about navigational links, they are a list…A list of links. A list is a list is a list, whether it’s a grocery list, top ten list, or list of links.

    Not to mention, by marking up your links as a list, it gives incredible flexibility if/when you wish to change the layout of your site. Want your nav running vertical down the side? No problem…just change the CSS. Want the nav to display horizontally across the top? Cool…change the CSS.

    If you’re so worried about an extra LI around each link, I think you need a new hobby.

    (Not sure why I’m taking the bait…)

    Anyway, great useful article Dave. Most of us appreciate it.

    Copy & paste the code below to embed this comment.
  40. Excelent job! I’m everytime surprised what you can do with CSS.
    Keep it coming…

    Copy & paste the code below to embed this comment.
  41. Very nice indeed.

    Copy & paste the code below to embed this comment.
  42. You have a way of thinking out of the box (no pun intended) that is very refreshing.

    Yesterday, in your mezzoblue post, you showed us that by leaving out the left and top properties in a positioned element you can effectively place an absolutely positioned block in the normal flow of the document. This article illustrates how it can be used to great effect when your child elements can be positioned inside their parent element – a positioned parent element that is still inside the normal flow of the document.

    I always thought that you either use float positioning or absolute, and that mixing the two were impossible. With this technique you have demonstrated whole other worlds of possibilities. I think this is the real innovation of the article. Your rollover examples are only one application of many to come.

    Copy & paste the code below to embed this comment.
  43. Dave: the NN4 version you linked in the comments leaves blue lines stretched across the page from the left margin in Firefox 0.8 under Win98.  Not seeing any of the problems other people encountered.

    Copy & paste the code below to embed this comment.
  44. To Dave:

    Wonderful technique. I had come up with a layout that was going to need something like this just a couple of days ago – Perfect timing!

    To Dante-Cubed:
    If you’re so concerned with the “serious questions”, and you can’t keep from reading ALA, why don’t YOU write an article about what you think is important?

    Complaining does nothing more than irritate the rest of us. As a previous commenter said – “If you don’t like it, why are you here?”

    Rather than complain, contribute.

    Copy & paste the code below to embed this comment.
  45. …is filled with lists. Go figure!

    Copy & paste the code below to embed this comment.
  46. …but since no-one has suggested it, what the hell. Could one large image file be used to replace all the seperate images for a page and lead to quicker loading?

    Copy & paste the code below to embed this comment.
  47. David Shea, you’ve done a heck of a lot to legitimize CSS for graphic designers and given me a ton of inspiration. You are just plain awesome. I can’t wait to test out this method.

    Copy & paste the code below to embed this comment.
  48. Yeah. They’re there for a reason: I wanted the square bullets. I was talking about using lists for no reason at all. I have a reason.

    “you need a new hobby”

    What is that supposed to mean? I have far too many: Musician, writer, historian, web developer.

    I tried contributing. Didn’t work. ALA would never publish me. That’s why I stick to what I’m good at: San Francisco History.

    Copy & paste the code below to embed this comment.
  49. Derek—definitely. You could build thirty different sets of buttons on one page and have them all draw from the same master image (though if you’re trying to construct thirty sets of buttons you might wish to re-evaluate your strategy). No reason to avoid JPG or PNG, any image format should work fine. Actually, Skyline (the first example in the article) makes use of JPG. Your particular example would be an interesting case study; JPG compression works a little differently, but you might still see enough savings in overhead to justify it.

    GIF does run into limitations when you try to cram a whole bunch of differently-coloured images into the same master image; you can tell on the blob example, even though it’s 256 colours. Just something to keep in mind; JPG might be preferable sometimes. This is one area where old-school slicing and dicing has a leg up, at the expense of the multiple colour tables.

    Terry—the positioning trick is just a feature of CSS, has been for ages. Though I have to admit, I’ve known about it for a while but never actually used it to my advantage until recently; it was a quirk more than a feature until I really understood it.

    Subrisi—I thought about that for a bit. As long as you’re trying to fit your sprite inside very specifically-dimensioned containers, then yep, you should be able to do it. But in practice you’ll probably find it doesn’t make much sense; a larger container will cause the other bits and pieces of the master image surrounding your sprite to poke through. Might be an interesting experiment though…

    rgw—What can I say? Thank you! (and thank you everyone else providing useful feedback.)

    Copy & paste the code below to embed this comment.
  50. http://rick.renegadeonline.net/ – first attempt w/ method

    first impression: me-likey this sprite-cutting technique.

    Copy & paste the code below to embed this comment.
  51. Image maps are really neat. Maybe I’m just a newbie to CSS, but why is the background set to transparent? Thanks!

    Copy & paste the code below to embed this comment.
  52. Dante-Cubed wrote:
    >>>
    They’re there for a reason: I wanted the square bullets. I was talking about using lists for no reason at all. I have a reason.
    <<<

    I hope you’re joking.

    But in case not: You don’t use lists simply because you want square bullets. You use lists when what you’re dealing with actually IS a list. A list of links is, by definition, a list.

    Sure, using <li>:s because you want the square bullets is a reason, but it’s not a good reason. You might as well say “I’m using them because the pope has 215 purplegreen anecdotes stuffed in his seventh kneecap on damp and lonely thursdays”. ;)

    Copy & paste the code below to embed this comment.
  53. I have to say this is absolutlely brilliant. Thanks Dave, you have once again proven your abillity to craft new ways to use old ideas… This will no doubt become common practice among CSS developers for years to come.

    Copy & paste the code below to embed this comment.
  54. Jemal:
    “Dave: the NN4 version you linked in the comments leaves blue lines stretched across the page from the left margin in Firefox 0.8 under Win98. Not seeing any of the problems other people encountered.”

    a {
    text-decoration: none;
    }

    should fix that.

    Copy & paste the code below to embed this comment.
  55. Dave, you just plain rock.

    There are so many CSS-relatd sites I wish I had time to read… Still, ALA and Mezzo do sit on top of the list, and this kind of article makes the “why” of that obvious.

    Brilliant.

    Copy & paste the code below to embed this comment.
  56. I actually ran across this technique while reading a Danny Goodman DHTML article in 2000, though he used JavaScript rather than CSS. After Zeldman implemented the Fahrner Image Replacement on the Daily Report, I got to messing about with combining the techniques as Mr. Shea has done.

    While I never actually finished my explorations (testing/hacking in Opera and IE/Win and a multitude of small variations on the basic principal created a black hole), some of the ideas that came out of the experiments included:

    —using an animated GIF for the :hover state

    —adding additional :visited and :active states for the buttons

    —including a ‘current page’ state to show the user where they were in the site

    —using one image per link (rather than one image per state) to increase positioning flexibility

    —using an acutal image within the <a> and positioning that (rather than a background image) within a block-level element with overflow: hidden, so that visitors with images disabled but CSS enabled would have alt text available

    —using a single-pixel transparent GIF (horror!) sized with CSS to get the alt text if images were off but CSS was on, and a span with a display of none to provide text if images were on and CSS off/unsupported; the obvious drawback is that screen readers will read the link text twice, which is unseemly but perhaps preferable to having the links entirely hidden to users with images off but CSS on

     

    Copy & paste the code below to embed this comment.
  57. I know. I would have used display: list-item, but IE 5x doesn’t support it, and it was just as complicated. I decided not to bother, and used lists.

    Copy & paste the code below to embed this comment.
  58. Thanks for posting that article! It’s pure genius!

    For a while I wanted to have an image map where the images were separate from each other, but until now I had no idea how to do it.

    I’ve changed the navigation on my website so it uses this sprite system, but I’ve made a few changes. In case you were wondering, I got the hover images to work in Opera using a bit of JavaScript. It’s a little bit bigger, but it works for me!

    If you want to see it, please check out my homepage: http://www.boxofjunk.net/

    Again, this article is excellent!

    Copy & paste the code below to embed this comment.
  59. … in IE 6.0? Anyone have a suggestion?

    Otherwise very good article, Dave!

    Copy & paste the code below to embed this comment.
  60. &lt;script type=&#8220;text/javascript&#8221;&gt;<br /> //Powered by DCScript<br /> function zebra() {<br /> var node = document.getElementById(&#8220;zebra&#8221;);<br /> var tds = node.firstChild.firstChild.childNodes;<br /> for (var i=0;i&lt;tds.length;i+=2) {<br /> var inc = eval&#40;i+1&#41;;<br /> tds[ i ].style.backgroundColor="blue";<br /> tds[inc].style.backgroundColor="green";<br /> }<br /> } window.<br /> &lt;/script&gt;
    Change the ID and the colors (or the onload bit). Correct me if this script is wrong. This was my initial thought has to how to create Zebra Tables. The firstChild.firstChild bit is for the TBODY tag (which is automatically generated by IE6).

    Copy & paste the code below to embed this comment.
  61. Ahh CSS you solve all of my woes. If it hasn’t been said before, I’ll say it again (and again and again): excellent article.  Really ingenious utilization of CSS here—I immediately ran to my computer to make my own!
    I think trying it with animations would prove interesting…

    On an aside(sorry), I am wondering if anyone knows the url to a website that illustrates designing css layouts using colored in borders.  I want to pass that along to a friend who could really use it.  I think the site in question had a rose as an example graphic?

    In any case, everyone at ALA is doing a great job—thanks for feeding my brain with wonderful things :).

    Copy & paste the code below to embed this comment.
  62. Why don’t you just marry CSS, Dave Shea or A List Apart?

    Just kidding. Dave has done a lot of stuff with CSS. He’s done as much with CSS as PPK has with Javascript and the DOM.

    Copy & paste the code below to embed this comment.
  63. Great lesson! I’m blown away by the innovation. Just when I thought CSS did just about everything, too!

    Copy & paste the code below to embed this comment.
  64. I think the previous comment (http://www.alistapart.com/discuss/sprites/6/#c7039) is in the wrong thread. No zebra tables here!

    Dante-Cubed: lists are used because they degrade gracefully. If the user turns off CSS, they get a nice HTML list instead.

    Copy & paste the code below to embed this comment.
  65. Ali Farahani – look at the layouts here:

    http://positioniseverything.net

    I also have a layout demo on my site which uses borders to create columns of equal height:

    http://www.designdetector.com/articles/cssdemo1.php

    Copy & paste the code below to embed this comment.
  66. I love this technique, nicely mixing some others to create an easy to reuse one.

    There is a lot of power in the background positioning technique. Right now I am using it on my new portfolio site, and I use it for a rollover and highlight state of an icon rather than the nav itself.
    check the work in progress, I will write an explanation document for an internal DOM training.
    http://icant.co.uk/index.php

    Copy & paste the code below to embed this comment.
  67. I really like the clean usefulness of this idea but I as well as several other designers use repeating backgrounds will this work with images that require patterning?

    Copy & paste the code below to embed this comment.
  68. I must say i’m super impressed by this technique.
    I’m learning css right now and designing a few webs sites. so i was wondering how i should slice my layout and implement nested div all over the place to make it work.

    But simplicity is always mother of reason.

    I tried to adapt this technique to my navigation bar, adding as well a piece of css to   show the current page status ( like in the i3forum page ).Then i removed all the script for the slicing script in an external css. but now it’s not showing anymore.
    is there an issue if this technique is externalized ?

    Copy & paste the code below to embed this comment.
  69. I have tried something like this a while ago when i saw the fast image replacement but I tried using animated gifs which would work in everything but opera. for some reason it didn’t like using animated gifs as backgrounds.

    Copy & paste the code below to embed this comment.
  70. Ive used a similar was of doing this for a long time, to make my links Very SE friendly and to also reduce the amount of JavaScript used on a site…

    Well done dave on getting this method out into the open :) summat i kept saying i would do but just never got round to doing so…

    If you would like to view my little way goto www.phunky.co.uk/2004/

    Copy & paste the code below to embed this comment.
  71. Does PPK know about Dante’s love for him? Should we tell him?

    Copy & paste the code below to embed this comment.
  72. I’m using this teqnuiqe, plus some other stuff i figured out myself (positioning a little box somwhere else on the page on :hover), only using CSS, now it looks like the CSS is going to be very big for a very small page!

    What’s best to use? CSS or Javascript?

    Copy & paste the code below to embed this comment.
  73. Wasn’t finished writing, dumdumb me :P

    The CSS is starting to grow well over 150 lines, only for this page: http://www.urbanturban.no/index.html (The new page is not uploaded yet).

    Is it better now, to do as it is done on the old page, use JS to show the “info images” on hover, or go with css?

    Copy & paste the code below to embed this comment.
  74. I have been playing around with this idea today but with no success. Is it possible to use this method to replace the image used to submit a form?

    Copy & paste the code below to embed this comment.
  75. Wonderfully creative! With CSS level 3 around the corner who knows what the ALA crew will think up next?

    Copy & paste the code below to embed this comment.
  76. I really shouldn’t post stuff when I’m tired. I make silly mistakes like mispeling wurds.

    Copy & paste the code below to embed this comment.
  77. And I’m the one being called immature.

    I agree with a lot of what PPK says. He’s seems to think (in some ways) like me. I don’t love him. I don’t agree with everything he says.

    Copy & paste the code below to embed this comment.
  78. Wonderful concept! It solves and simplifies a lot of issues I (and most likely many others) have had problems with.

    Dave, your example at http://www.mezzoblue.com/tests/sprites/blobs.html causes my Win/IE6 to have a delay of 2 to 3 seconds before showing the hover states. Mozilla’s doing it right though. And the skyline example in this article works fine in IE6. What could be the cause of this discrepancy?

    Dante-Cubed, please correspond directly with people with whom you want to quarrel on a more personal level. I’d encourage others to not respond to your baiting any more.

     

    Copy & paste the code below to embed this comment.
  79. I’ve coded a few sites for some graphic designers, and I usually always have to slice up the navigation, as they are irregular shapes and have completely different backgrounds.

    An example is http://yayforgecko.net/k8/ where I used the sprites to work with the backgrounds.

    A potential problem is the IE5/Win position: relative bug
    http://www.quirksmode.org/css/ie5win_relative.html

    Make sure you always use a height when using this technique!

    Copy & paste the code below to embed this comment.
  80. i’ve slightly changed dave’s code to work with text within each of the sprite boxes. it works in ie6, ie5.5, moz on pc and safari and ie on osX. i’ve had to use the box model hack, which is kinda ugly… so if anyone has a better way of doing this, please let me know.

    http://230.ca/spritestext/

    Copy & paste the code below to embed this comment.
  81. Thank you Dave!  I have been thinking about my nav for awile and was using separate images for each menu item. I’ve immediately implemented it on my subpages, and it works great. This thing really saves time when making alternative style sheets.

    Hypothetically, one could put almost all of the images used on a page into one jpeg, and then when it comes time to redesign / create new style, all that would be needed to be edited would be the master image (then a find/replace on the css).

    Keep writing this stuff; this is why I read ALA

    Copy & paste the code below to embed this comment.
  82. Avoiding a hack in that particular example would be easy, just add span tags around the links then replace the 20px padding-right in #sidemenu a with #sidemenu span a 20px <em>margin<em> instead. Fair enough, some designers would rather use a hack than ‘code-bloat’ but that’s down to personal preference.

    Copy & paste the code below to embed this comment.
  83. Well… thats about it really – Superb!

    I love this CSS stuff.  Everytime I use it I’m filled with on overwhelming feeling of “doing it elegantly” instead of kludging it horribly.  And this is one of the most elegant uses I’ve seen yet.

    First time I’ve found this website… brilliant… I shall definitely be exploring it further.

    Copy & paste the code below to embed this comment.
  84. In case of “CSS on and Images off” a good solution is Gilder/Levin Method mentioned here:http://www.mezzoblue.com/tests/revised-image-replacement/
    (yes with extra spans and no transparent images but i think it’s worth).

    Image flickering:
    When you use that technique the flickering is very annoying because the text become visible on every mouse over. So I have created a behavior to solve this issue. (The behavior is really simple, adds a new image between the text and the span (based on the CSS background-image absolute URL))

    Here:
    http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
    (The page is in Hungarian but i hope you can understand the source code :)

    There is a another silly thing in IE. The mouseout doesnt chenges back the hover state of the span inside the link. We should add an extra a:hover {} rule beside the a:hover span{} and then everything works.
     

    Copy & paste the code below to embed this comment.
  85. In addition to the potential overall savings on filesize due to reduced overhead, there is also a performance benefit: only one trip to the server is required to fetch the images. This, in my opinion, is the more important gain (outside of cleaner and simpler html and css).

    Copy & paste the code below to embed this comment.
  86. Brilliant article Dave.  Also…just read the D-W interview.  Puts me in mind of applying this technique to a Zen-Garden project ; )

    Dante…your a troll.  You must not have been breast-feed as a child.  Ya poor bastard.
    http://www.alistapart.com/discuss/sprites/4/#c6994

    Copy & paste the code below to embed this comment.
  87. http://www.alistapart.com/discuss/sprites/8/#c7071

    Paul,

    The height box model hack can be avoided by setting the line-height equal to the height and avoid padding at the top or bottom.

    Copy & paste the code below to embed this comment.
  88. First off, I think this article is world-class. Dave took a good technique (Pixy’s rollovers), and improved upon it.

    My question is really more around image replacement, so if this isn’t the forum for it, please let me know (politely!).

    In an attempt to add text to the links in the Buttons section (#iconmenu), I’ve tried to repurpose the Shea Enhancement (Gilder/Levin IR w/ title) summarized on mezzoblue to work with links, instead of an h6 and nested span. I can’t seem to get the <span> to /not/ obscure the <a>. In other words, the image replacement works, but the 100% span covers up the <a>, and I lose the rollover and the cursor change.

    I’m elected not to use the text-indent: -1000em method of IR, so without gettting into an argument about which method is better, can someone point out the approach to use to incorporate Dave’s “Shea Enhanced” IR tech with the #iconmenu example?

    Copy & paste the code below to embed this comment.
  89. Very interesting article.  But why, in the “Irregular shapes” section, is a second “after state” image required?  Could you not spread out the pieces in the after state so that they do not overlap?  This might make the math for positioning the after state pieces a bit more complicated, but it’s something you’d only have to do once, and your after state image would be smaller and non-redundant.

    Copy & paste the code below to embed this comment.
  90. I’ve just tried you examples, but I still experience slight delay in IE 6. Done some experimenting myself (http://www.inet.hr/~mdugonji/webdesign/experiments/image_slicing/), but my try isn’t satisfying neither.

    Copy & paste the code below to embed this comment.
  91. Janos, I believe there is something wrong with your settings, I viewed both your link and Dave’s, and neither of them had any delay in IE 6.

    Copy & paste the code below to embed this comment.
  92. Will whoever is trolling my SF History board please stop. I know this is off topic but they are people from this ALA forum with the I.P. Addresses:
    81.5.138.228
    172.194.21.72 (someone named Mikey)
    I’m assuming the latter is the one who posted the “I love PPK” trash. Please stop. I will stop trolling here if you stop on my site.
    Ray, Spook and Mickey please stop. If you want to deal with me email me, don’t post rubbish on my SF History site. Just because I might troll here is no excuse for you to do the same.

    Thank you.

    Copy & paste the code below to embed this comment.
  93. I’m not sure that this technique is the end-all be-all solution that others are making it out to be.  There’s a sweet spot in a page’s design where multiple connections to a webserver will almost certainly result in a faster display of images than this will.

    Consider this: you have an extremely image-heavy page, with a few nav items that each have a largish filesize.  By concatenating all of these nav items together, you need to wait until the entire file downloads before displaying any of the images.  On the other hand, with multiple connections to a webserver, your nav items will be guaranteed to show up as soon as they are downloaded.  If your nav item is over 2k, for instance, the image header filesize overhead is negligible.

    This is the age-old serial vs. parallel debate, just in graphic format.  If establishing parallel connections requires just a bit more overhead, and bandwidth is constant, what’s the point at which a serial connection is a better idea?  For smaller pages, sure, knock yourself out, but for any decently-sized page (say 40k or larger) I just don’t see this method as speeding up rendering times at all.

    Copy & paste the code below to embed this comment.
  94. Loved the article, only problem now is I have to go and RE-DESIGN my image maps! But probably a good idea to do so anyway.  I was also intrigued by the other recent article on image maps (see: http://www.alistapart.com/articles/imagemap/)

    One question though.

    In the blob example by using appropriate title tags one can get the name of the link to pop up but I wanted to employ the effect used by eric meyers (old but tested method) of pop up text (see:
    http://www.meyerweb.com/eric/css/edge/popups/demo.html) so that the link name would appear somewhere else on the page, BUT I can’t seem to get it to work in using this method?  Is it because it is within a list?  Should I give up? is there another more ingenius way?

    I’m NO expert with css but I love trying out the new methods people keep coming up with on alistapart, GREAT site.

    Copy & paste the code below to embed this comment.
  95. Marko:
    My behavior (.htc) doesnt solve the delay but the flicker. The delay is beacuse IE downloads every time the image again and again.
    1. Mouseover/mouseout
    2. IE:Turns of the image
    3. IE downloading the image (the delay)
    4. download complete IE show up the image

    Sam Ingle:
    If you set the cache properties in IE to “every visit” (or something like that) you should see the effect. (image flicker or text shows up)

    More about flicker in IE:
    http://www.fivesevensix.com/studies/ie6flicker/

    Copy & paste the code below to embed this comment.
  96. This one is an excellent idea for my site, which can be used to select Eastern, Central, Mountain and Pacific zones in the United States before selecting specific States. I would appreciate to know the quick summary of Pro/Con of that design for all browsers wherever possible? I aim to satisfy my audience to the best possible, even for text-based lynx users.

    Copy & paste the code below to embed this comment.
  97. Sorry to wander off-topic again, but remember this is supposed to be a discussion. Everyone doesn’t have to like what has been presented. If Dante doesn’t feel that this is a worthwhile use of ALA’s bandwidth, then so be it. He’s entitled to his opinion, even if you don’t agree with it.
    I know I don’t. This is an interesting visual design element. And let’s face it, Lynx compatibility and standards compliance aside, visuals are what draw in your guests, almost as much as your content. And that’s my opinion.

    Copy & paste the code below to embed this comment.
  98. “I will stop trolling here if you stop on my site… Just because I might troll here is no excuse for you to do the same”

    So you admit to trolling. Sigh…

    If people are trolling your site, they’ve as much right as you have to troll here. But remember the ALA text at the top of this page: “We reserve the right to delete flames, trolls, and wood nymphs.”

    Bye.

    Copy & paste the code below to embed this comment.
  99. I just tried out this technique on a site that has buttons which require a number of states: normal, hover, selected, and disabled. What I found most useful was the ability to add and modify the button states just by swapping out one image. That way, I know that I’ve updated all the states of all the buttons and won’t be surprised by a rollover state on a selected button that has the old font, for example.

    Copy & paste the code below to embed this comment.
  100. Nice Work Dave!!

    And the CSS has given me a completely new set of ideas to play around with.

    Thanks and lot fo sharing it.

    Copy & paste the code below to embed this comment.
  101. The problem I have is that markup that consist of a list of empty links is rather useless when I am using a screen reader or have CSS turned off. Furthermore, a sliced image would give me alternative texts for every image.
    Now, to change this all we need to do is to add a text in the “slices” and hide this text with another FIR technique, for example
    http://www.kryogenix.org/code/browser/lir/ .
    Wouldn’t that be a better solution, as it does fall back to a fully accessible list of links no matter what I do?

     

    Copy & paste the code below to embed this comment.
  102. Just read this great article and ran away and tried out an idea it gave me for transposing manuscript text with typed text – check it out:

    http://www.mch.govt.nz/mch-only/olde-text.html

    very rough and ready, but only took me about 15 minutes and would be easy enough to tidy up.

    I can see whole new worlds opening up, thanks!

    Copy & paste the code below to embed this comment.
  103. I never said I didn’t like the technique. It’s a bit too complicated for me, but still I like it. I don’t think I’ll ever need to use it in practice, though. But ya never know.
    I was thinking of bringing Javascript into the mix, not for the rollovers but maybe for clipping. Not at all sure how I’d do this.

    Copy & paste the code below to embed this comment.
  104. Jamie, that’s a very interesting experiment. Although you might be accused of “dumbing down” text for readers. (“Why can’t they just learn to read the original script!”)

    This is the kind of dynamic effect that can only occur on the web, not in print. I’m all for it. But is there a way to make the rollovers bring up standard text, not images? (Perhaps using generated content.)

    Copy & paste the code below to embed this comment.
  105. Won’t this bloat the data? Instead of having lots of small files to be loaded, a big one has to be loaded hundreds of times.

    Copy & paste the code below to embed this comment.
  106. Chris, thanks for your comments.
    It ain’t so much about dumbing down as about making it readable for those who can’t see so good.

    I like the idea of doing it with real text in theory, but can’t really see a way of doing this and staying with pure css and static html – especially given the way different browsers display fonts etc.

    I’ve just modified it slightly so there is a no-style version now – this divides the text into a bulleted list which is a bit odd, but much better than nothing. Would be interested to here other’s suggestions for how to do this better:
    http://www.mch.govt.nz/mch-only/olde-text.html

    Copy & paste the code below to embed this comment.
  107. Very nice effect! but has anyone successfully tweaked it so that images can be printed out?

    Copy & paste the code below to embed this comment.
  108. Well, the thing that bugs me is that we add links that lead nowhere for a visual effect. In your case, it is not wise to make the flowing text a list, but if you use this technique to spice up a navigation, then we would need it.

    It once again boils down to hover effects on elements that are not clickable being misleading. If every browser supported hover on every element, that’ll make it easier.

    Copy & paste the code below to embed this comment.
  109. I just added the text and the technique described at
    http://www.moronicbajebus.com/playground/cssplay/image-replacement/

    to create a real navigation with this:

    http://icant.co.uk/buttons.html

    works in IE6 and Opera7 here. The only problem is the same with every IR technique apart from the javascript ones, that it fails visually when images are turned off. When Images are turned off and CSS is turned off it is fine again (easily testable with opera)

    Copy & paste the code below to embed this comment.
  110. It is realy great example . Long time ago when I
    have seen Pixys original way I made this , it dont look like css , but it is . Has three state like normal button . So here it is http://www.kralovskydvur.com/dynamiccss/ahover.htm
    . Please wait a bit for image 24kb

    Copy & paste the code below to embed this comment.
  111. It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup. Funny.

    That aside, the desicion on wether to use lists for this or not could go either way. I would just use a DIV with maybe some spans. Maybe lists would be better, since they have shorter names (UL and LI as opposed to DIV and SPAN).

    Just thought I’d wrap up this argument.

    I even thought or using an IE behaviour htc to do this, but that would be too browser-specific.

    Copy & paste the code below to embed this comment.
  112. Until navigation list (NL) is added to all browsers, then I don’t think designers have a better choice than unordered list. Semantically speaking, a list of links would be the best scenario for establishing a navigation set in terms of raw HTML [for non-visual users].
    Dante-Cubed, this code is far, far, far cleaner then any image map method of old or relatively new. Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.

    Copy & paste the code below to embed this comment.
  113. Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
    edit: Without having to embed a span inside the anchor.

    Copy & paste the code below to embed this comment.
  114. Dante wrote:
    >>>
    It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup.
    <<<

    Of course people use simplifications. It’s not technically true that web standards automatically lead to cleaner documents; e.g. of course if you have a valid document and remove the doctype (thereby making it non-standard), it’s going to be smaller in filesize. But in making the case for web standards, it would be too time-consuming to include all such little gotchas. The listener would lose interest before the speaker had a chance to get to the good parts.

    It’s also an unfortunate fact that the term “web standards” is widely used as if it meant “purely semantic XHTML code coupled with CSS”. Font tags might be looked down upon even among the most passionate CSS haters, but they’re still part of a so called web standard (they’re officially called “recommendations” by their creators). So, web standards can actually lead to terribly bloated code if you use the “wrong” standards (or even the “right” standards) the “wrong” way.

    Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available). For the last time: A list is a list and should be marked up as a list, just as a paragraph should be marked up as a paragraph.

    (It could be argued that the written content of a page is technically a list of paragraphs, but that, IMHO, is not the semantic definition of a list in HTML. The items in a list should have something relevant in common other than all being parts of the content.)

    So, no, “Web Standards promoters” do not contradict themselves in this case.

    Copy & paste the code below to embed this comment.
  115. Well conceived and beautifully written Dave! Here’s a short FIR-based modification for Opera 6.

    Change the background position for the ul element to reveal the hover image instead:

    #skyline { width: 400px; height: 200px; background: url(test-3.jpg) 0 -200px no-repeat; margin: 10px auto; padding: 0; position: relative; }

    Adjust the widths of the list elements to add up to the full 400px width of the ul element:

    #panel1b { left: 0; width: 96px; }

    #panel2b { left: 96px; width: 76px;/*formerly 75px*/ }

    #panel3b { left: 172px; width: 111px;/*formerly 110px*/ }

    #panel4b { left: 283px; width: 117px; }

    Finally, add these background postions for each list id tag‘s a element:

    #panel1b a { background: transparent url(test-3.jpg) 0 0 no-repeat; }

    #panel2b a { background: transparent url(test-3.jpg) -96px 0px no-repeat; }

    #panel3b a { background: transparent url(test-3.jpg) -172px 0px no-repeat; }

    #panel4b a { background: transparent url(test-3.jpg) -283px 0 no-repeat; }

    That‘s it. Hope somebody finds this helpful.

    Copy & paste the code below to embed this comment.
  116. A Text replace version for images off, css on mode.
    And a possible solution for printable version with CSS content property. (Only works with Opera7)

    http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/

    I have created a DHTML behavior to reduce flicker in IE, fortunately that is good for printable version too…)

    Copy & paste the code below to embed this comment.
  117. >Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available).<

    Oh, there is: The Menu tag. It’s just like UL but has no bullets. Since most people “tame” the lists by removing bullets it doesn’t seem to be a problem. Of course if you DID want bullets you could always do:
    menu {
    display: list-item;
    }
    <menu>
    First Item

    Next

    </menu>

    You make the call.

    Copy & paste the code below to embed this comment.
  118. Menu is deprecated. Never seen it used myself.

    http://www.w3.org/TR/html4/struct/lists.html#edef-MENU

    Copy & paste the code below to embed this comment.
  119. …Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it. It should make a comeback.

    Copy & paste the code below to embed this comment.
  120. HTML Lists degrade wonderfully”
    Not in NN4.x. Nothing happens at all, and all you see is part of the image.

    Copy & paste the code below to embed this comment.
  121. If you check the definition of the word deprecated

    http://dictionary.reference.com/search?q=deprecated

    I think you will see that it in fact does mean just that.

    Copy & paste the code below to embed this comment.
  122. There’s a reason why things become deprecated.  Usually it’s because something better has come along.  With the menu element and the ul it’s kinda like leaded and unleaded gas.  Most sensible people understand (well…those with half a brain anyway) the drawbacks of using leaded gasoline.  Sure…leaded gas is still available here and there.  That’s called backward compatibility.  However, just because it’s still available does not mean you should still use it given the choice.

    Could you imagine the crap that would be in the air if we all still used leaded gasoline.  Think how bad it would be in a large city of several hundred thousand.  Say a city like San Francisco.  It wouldn’t be as beautiful as it is today with all kinds of cars running around using leaded gasoline.  Leaded gasoline is still available “here and there” as a transition.  The only people using leaded gasoline are those with antique automobiles, those that can not afford to buy a new auto and those that don’t give a shit about community.  Either you understand that or you don’t.

    Copy & paste the code below to embed this comment.
  123. “Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
    edit: Without having to embed a span inside the anchor.”

    As posted here earlier for review:
    http://icant.co.uk/buttons.html
    has exactly that.

    We should stop wasting time on useless discussions if lists or menus are correct and stick to the topic at hand.

    /me puts the lid on the box with trollnip

    Copy & paste the code below to embed this comment.
  124. Although <menu> may be used, despite being deprecated, I try to follow the advice of the W3C myself. At the base of the page I linked to earlier, they say:

    “We strongly recommend using UL instead of these elements.”

    Copy & paste the code below to embed this comment.
  125. hi there again, a few days ago i posted here about this technique.
    if i put the code in a linked css it’s not showing anymore the picture.
    i could not find out why.

    now i’m almost finish with my first complete css designed web site, but a lot of adjustment for browsers compatibility.

    and just about ths technique, it’s working well almost everywhere but bug comletely on opera mac ( the latest version )
    is ther a work around ?

    could somebody tell me as well if they are good places where show your web sites to get some help debugging. i start going crazy…

    Copy & paste the code below to embed this comment.
  126. Dante wrote
    >>>
    Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it.
    <<<

    As has been pointed out, that’s EXACTLY what it means.

    At any rate, we’re talking about saving a few bytes per page. You might as well start removing all the line breaks from the source. Contrast that to the tens of kilobytes (per page) of unnecessary tables and font tags that “web standards promoters” (WSP) are usually talking about when they mention bloated code.

    You see what you’re doing here, Dante? First you say (or at least imply) that WSP are over-zealous. Then you imply that they’re not zealous enough.

    Copy & paste the code below to embed this comment.
  127. What I meant to say was that even though MENU is deprecated, it is still supported by browsers to provide backwards compatibility. I think even though some tags like XMP have been deprecated for years, they’ll be supported by IE for many years to come for backwards compatability. You can still use MENU. Besides, if it’s deprecated it won’t do anything. You can have semantics (UL becomes the much more semantic MENU) and use CSS to control what it does.
    If you’re crazy enough you could do this:
    <HTML xmlns:DC>
    Blah blah
    <DC:Menu>
    Menu here</DC:Menu>
    Anything you want
    <DC:Navbar>
    </DC:Navbar>

    Copy & paste the code below to embed this comment.
  128. http://www.quirksmode.org
    For all your browser quirks

    Copy & paste the code below to embed this comment.
  129. Chris,
    I don’t understand how you’re making the text between the <a> tags invisible without the span tag… I tried “overflow: hidden;” in the <a> definition but it didn’t seem to do anything. Is there something else working in conjunction with this?

    I’d like to stay away from
    span {display: none;}
    because screen readers can’t see the text.

    Copy & paste the code below to embed this comment.
  130. Use this:
    A {
    text-indent: -100em;
    }
    I believe this is called the Leahy-Landridge hack.

    Copy & paste the code below to embed this comment.
  131. For those of us not skilled at visualizing code and too lazy to type it in, a link to an example would be helpful.

    …Browser

    Copy & paste the code below to embed this comment.
  132. If you want an example of how one of the points mentioned in this article is wrong, view the examples with Netscape 4. They do not degrade gracefully. In NN4 all you see is part of the image and nothing else. No plain ULs. No behaviour. A better way would be to import the styles so Netscape 4 can access plain content instead of almost nothing.

    Copy & paste the code below to embed this comment.
  133. Not just a major step forward but a beatifully written piece as well. Thanks so much for the goft of pleasure in addition to the knowledge!

    Copy & paste the code below to embed this comment.
  134. That was a great article, didn’t really know that you could do that with CSS.

    Copy & paste the code below to embed this comment.
  135. Hey Dante-Cubed! Now someone wants to make a whole site using nothing but lists!

    http://www.burned.com/absolutelists.php

    Inspired by Tantek Celik no less.

    Copy & paste the code below to embed this comment.
  136. I saw that. I’d expect to see that ludicrisy on Evolt.

    Copy & paste the code below to embed this comment.
  137. You rant about alistapart on evolt and you rant about evolt here. Both refused to publish articles by you. You whiningly announced you will retire from writing online articles, if that is all you can contribute here, then please retire from posting.

    Copy & paste the code below to embed this comment.
  138. I didn’t mean my above post in a bad way. What I meant was that Evolt always has stuff that you won’t find anywhere else, or stuff that might not make much sense. I do have a right to criticize.

    I contribute a lot. If you look at the Zebra Tables comments you’ll see just that.
    Whining? I have a few responses to that but that belongs in email, as I said earlier.

    Copy & paste the code below to embed this comment.
  139. ..Two sentences is not a rant.

    Did you write EasyCMS, Chris? It’s pretty cool.

    Copy & paste the code below to embed this comment.
  140. On page 11 of these comments, Jamie Mackay posted a great link to an experiment using rollovers to allow people to decipher a piece of script text, by hovering over the lines. I’ve just come across another great example like this. (I would have emailed this to Jamie, but don’t know his email address.)

    http://stunicholls.myby.co.uk/menu/alice.html

    Copy & paste the code below to embed this comment.
  141. I’ve used the methods described to make the following page:
    http://test.irregular.ch/hover.html
    I had to use z-index several times so that the tiny pieces can be selected too

    Copy & paste the code below to embed this comment.
  142. For the stuff I do, I’d name this one of the top 3 articles on A List Apart easily.  Not only is this innovative and clean, it’s better than Javascript and saves n00b schmucks like me from having to learn it!  Ha ha :)

    Copy & paste the code below to embed this comment.
  143. Used your technique to change this site’s Navigation from damn old JavaScript and 16 GIF-Files to some lines of slim CSS-Code and ONE GIF-File. I love it!

    Copy & paste the code below to embed this comment.
  144. http://www.scherenburgfestspiele.de/html2004/index.html

    Copy & paste the code below to embed this comment.
  145. I agree this was a better solution tha javascript—kinda.
    It’s a lot more complex; you must know the correct coordinates for the position.
    Javascript is meant for adding usability anyway. Just don’t get too carried away with ditching [removed] you’ll need it eventually.

    Copy & paste the code below to embed this comment.
  146. So, has anyone found a nice way to not only fix the flicker, but get past IE having to download the image every time?

    I was really hot about this idea until I noticed that IE 6 completely ruins it. It makes fast hovers impossible, yet again.

    I’ve heard the discussion about using fir, but I have yet to see an example targetted at rollovers using this method.

    Anyone figured it out yet?

    /dak

    Copy & paste the code below to embed this comment.
  147. Excellent work, Mr. Shea, and thanks for sharing.

    With this tutorial in mind, I retired to my CSS laboratory and started experimenting; I took a couple of accessbility aspects from Prof. Bowman’s “Sliding Doors” technique and cross-bred them with “CSS Sprites”.  Then I started testing the thing in the various major browsers – here’s a code overview;

    <body>
    <h1 class=“alt”>My Website Name</h1>
    A brief welcome message.
    <ul id=“site-navigation”>
      <li>
      <h2><span class=“alt”>Section 1</span>
      Section description and overview.
      </li>
      <li>
      <h2><span class=“alt”>Section 2</span>
      Section description and overview.
      </li>
      <li>
      <h2><span class=“alt”>Section 3</span>
      Section description and overview.
      </li>
      [Etc…]
    </ul>
    <div id=“main-content>
      [Blah blah blah…]
    </div>
    </body>

    OK, I think that’s pretty self-explanatory; if you have CSS on, you get a very nice graphical top bar.  If you switch CSS off, you get neatly structured text.  Trouble is, it’s working fine (on Windows) in Firefox 0.8, IE5.5 and IE6.0.  Where the wheels seem to fall off is when you view the thing in IE5.01…although the initial (i.e. “off” state) display is perfect, the rollover image only appears on click, and then stays highlighted until anther link is clicked.

    It’s puzzling, because Dave’s final (map) example works perfectly in IE5.01 on my machine, so it’s not a settings issue.  I’ve tried removing everything from each list item except for the link itself – replicating Dave’s final example almost to the letter – and still it (mis)behaves the same way.  What might I be missing or doing wrong, any thoughts?

    Copy & paste the code below to embed this comment.
  148. Ever trying to maximise CSS, this article was just what I was looking for. Simple but really effective.

    I went and changed a rollover navbar immediately and was very pleased with the results.

    Thanks!

    Copy & paste the code below to embed this comment.
  149. <voice accent=“irish”>
    project lead: ‘What’s that ya have?’
    developer: ‘CSS.’
    pl: ‘CSS. BRILLIANT!’
    pl: ‘What do ya do with it?’
    developer: ‘Well, I have found a way to make rollovers using only one image.’
    pl: ‘And you make rollovers work in many browsers using only one image no matter where you are?’
    developer: ‘Yes.’
    pl: ‘Make CSS rollovers using one image…BRILLIANT!’
    </voice>

    Copy & paste the code below to embed this comment.
  150. Great technique, except that Google’s spider seems to skip over empty <a > tags.  This makes sense, I suppose, but it means that if you’re implementing this and you care about whether or not spiders and blind people can view your site, you should probably include a hidden version of your navigation at the top of the page.

    Copy & paste the code below to embed this comment.
  151. This is gonna save me a lot of time on some upcoming sites.

    I’m very impressed at the ingenuity shown here. Well done!

    Copy & paste the code below to embed this comment.
  152. It’s so cool!

    Copy & paste the code below to embed this comment.
  153. Firstly, excellent article – I hadn’t thought of doing things this way.

    Here’s my attempt, which uses the initial idea along with a number of bits of advice which have been mentioned in this discussion.

    http://www.plexusmedia.co.uk/rollovermap.html

    The graphic used is
    http://www.plexusmedia.co.uk/images/hovermap.gif

    Browsers tested on
    PC – IE6, Firefox
    Mac – IE5, Safari 1.2, Firefox .08

    Lessons I’ve learnt in this are:-

    1- Because this map is a lot more complicated than the Blobs example, I needed to create 4 versions of the graphic rather than 3, as Inverness-shire was surrounded by so many other counties. The image is now a whopping 60k. However, I could go through it chopping out lots of areas in the 3 rollover maps and turning them white which would reduce the filesize. As Scott suggested earlier in this thread, I could go through the image deleting everything from the rollover state versions except the yellow bits, and then move them all up nearer the normal map and redo all the arithmetic. I’d guess the image size could be as little as 20k.

    2- I’ve seen mention of using z-index to bring some of the smaller areas to the fore. I don’t think it’s needed – what I’ve done here is shuffled the <li>s around – the later ones seem to have the equivalent of the highest z-index.

    3- I’ve added title=“Shetland” etc to the <a >s for alt tags

    4- I’ve used the a {text-indent: -100em;} hack as suggested by Dante-Cubed (there was something useful amongst all the vehemence) so that I can add text links in the <a></a> tags. Hopefully this would give a navigable list if the styles are not used.

    The only annoyance for me is that the arithmetic is a pain in the arse. What I want now is someone to design some software to make it easy, in the same way as something like Globalscape’s Cutemap does for normal image maps.

    cheers

    Garve

    Copy & paste the code below to embed this comment.
  154. Comment from the sliding doors article:-

    “Switching IE to not check the page for newer content every time removed the image flicker problem.”

    Should apply here too I would think.

    Copy & paste the code below to embed this comment.
  155. The best reason to use, say, a 500×50 image instead of 10 50×50 images is because for every image, the server sends a bunch of headers to the client before sending the image, and the client pauses to see if the image has been cached or modified since it was last cached, and then it signals the server to continue downloading if it needs the new version.

    This is very slow when there are a lot of images. The menu on my website uses 58 images just for the buttons (there are 23 buttons, if I remember right). It takes forever to load the damn thing… but a single image would load much quicker.

    Also, everyone knows the problem of image rollovers—you need to pre-cache the rollover image in JavaScript or it won’t be loaded until you move the mouse over it. A sprite map fixes that problem.

    Otherwise it was a really great article… it occured to me that something like this would be great but I didn’t think it could be done with CSS.

    Copy & paste the code below to embed this comment.
  156. how can we make it work

    Copy & paste the code below to embed this comment.
  157. I Cant get to work a vertical menu with this method.  someone can help me?

    thank you

    MAt

    Copy & paste the code below to embed this comment.
  158. Thanks for this nice article!

    Copy & paste the code below to embed this comment.
  159. Hi there,
    I’ve found that Safari on OS 10.2.8 has problems with returning to the normal state after the hover. This has something to do with position:relative of the <ul> but I can’t figure out a way to circumvent that.

    Does someone maybe have a fix for?

    Anyway, the article is great.

    Copy & paste the code below to embed this comment.
  160. Chris Fam’s comment from March 12th,

    “has anyone successfully tweaked it so that images can be printed out?”

    is a major issue that, amazingly, no one has addressed. Without a work-around for this I wouldn’t recommend using this method.

    Is there a solution to this problem?

    Copy & paste the code below to embed this comment.
  161. I have already post my ideas:
    http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
    But no comments arrived :(

    To print the image use CSS content property. But create image content is only supported in Opera7.
    (This can be the solution in the future.)

    For IE use a DHTML behavior that adds a layer with the image under the link. When the background-image is not visible thhis image will show up.

    Copy & paste the code below to embed this comment.
  162. Yeah it sucks CSS3 content is only supported by “Opera 7”

    Copy & paste the code below to embed this comment.
  163. Do the browsers load the background-images when they find them in the css-code? Otherwise it would cause the rollover to lag.

    Copy & paste the code below to embed this comment.
  164. For those noticing Internet Explorer flickers, please head over to my site and read the latter half of this post:

    http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/

    IE is acting in error and hitting up the server when it shouldn’t; a few lines in your .htaccess file will fix this right up.

    Copy & paste the code below to embed this comment.
  165. I’ll say from the outset that I’m not especially good with CSS. ;)

    I can’t work out how to translate this to a vertical list of links, like thus:

    link 1
    link 2
    link 3

    …instead of the horizontal way this example is set out. I’ve tried changing the “left: x; width: x” to “top: x; height: x”, and the different offsets, but Safari doesn’t even register there being links there. Doing it horizontally, as demonstrated here, works fine. Thanks in advance!

    Copy & paste the code below to embed this comment.
  166. Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?

    Copy & paste the code below to embed this comment.
  167. Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?

    Copy & paste the code below to embed this comment.
  168. This guy has done it with a vertical list of links, but they’re not in a list … just stacked anchors.

    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html

    The tute:
    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    Copy & paste the code below to embed this comment.
  169. This article is amazing, the writing of the tutorial is also outstanding. I had it working in a complex layout in no time. The code is rock solid, very stable.

    Thanks Dave for taking the time to document this incredible technique!

    Copy & paste the code below to embed this comment.
  170. Fantastic!

    I’ve only been doing full CSS-based design for a few weeks, but I’m loving it!

    There’s a submission for CSSZenGarden from me in Dave’s inbox (we can but try!) and my menus are going to look fantastic now that we’ve been let in on that little gem!

    PLEASE keep up the hard work everyone- it’s our future!

    (and Dave, accept my submission… I’m sure I can find out where you live…)  lol

    (I’m REALLY just kidding. really.)

    :D

    Coos

    Copy & paste the code below to embed this comment.
  171. I just cannot get my head around translating this to a vertical list. :( Thanks for the link, Mike, but that’s not quite what I’m looking for.

    Can someone have a look at http://www.virtualwolf.org/new/ and tell me where I’m going wrong?

    Many thanks!

    Copy & paste the code below to embed this comment.
  172. Oh yes, and would it be better to have the rollover side of the image to the right of the normal one, or below it?

    Copy & paste the code below to embed this comment.
  173. Hey VW, not managed to get this fully underway myself, but did gather that you can put the image anywhere you like- left, right, top bottom…. it’s all a maths game.

    As long as the position attributes for the images in both states correspond with what you want to see in said states, your laughing.


    As for the vertical lists, I’m still trying to crack that myself, but I did see one used on http://www.CSSZenGarden.com  
    Have a little browse through to see if you can spot it (I’ll have another look myself)
    (could it be ‘display: inline;’?)

    All the best ;)

    Copy & paste the code below to embed this comment.
  174. And what do you know,,, it was on this site!  (well durr!)

    http://www.alistapart.com/articles/practicalcss/  when it loads run your search function (usually ‘ctrl’+‘f’ [find]) to locate the words ‘Checking it Twice…’

    It’s right there.

    (Normally, a nice touch with css is that if an element has an ‘id’ attribute, you can use it as an anchor to that direct part of the page. That page just didn’t seem to have any!)

    Further reading on that point… http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.3
    ‘…because the W3C aren’t f***ing about…’ (quote:Me, just now.)

    I’m off to bed, but no doubt CSS won’t let me sleep AGAIN.

    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

    Coos

    Copy & paste the code below to embed this comment.
  175. >Hey VW, not managed to get this fully underway myself,
    >but did gather that you can put the image anywhere you
    >like- left, right, top bottom…. it’s all a maths game.

    Aye, that’s what I figured, but I can’t work it out. Instead of having “left” and “width”, you’d think you’d have “top” and “height”, but it doesn’t work. I end up with the entire navigation image being linked as the bottom (contact) link, and the whole lot mouseovers at once…

    And setting it to inline instead of block doesn’t work either. :(

    Copy & paste the code below to embed this comment.
  176. http://www.alistapart.com/articles/taminglists/

    I’m working on this one at the moment, but I’m gonna need to turn off http://www.monkeyradio.org to concentrate!

    Copy & paste the code below to embed this comment.
  177. Great article am experimenting with this right now but am having problems centering the list. I have gone to many resources and use the text-align:center trick for IE and the margin:0px auto for all others.  In all other browsers except IE the list is centered. 
    But in IE it is always about 30 picels off to the right forcing the user to scroll in 800×600 resolutions

    Anyone have any good links or solutions to centering this list?

    Copy & paste the code below to embed this comment.
  178. I am trying to learn as much as possible about CSS. I have been using Dreamweaver & Fireworks for about 5 years. I am currebnlty converting our website to all CSS.  However, althoguh I keep hearing about “sprites” I have no idea what they are. It appears to be some kind of image.  Could you please clarify so I can understand what you are doing. I find that those who are familier with a technology often forget that those who are still learning may not yet know all the jargon, much of which is not in the reference books.

    Copy & paste the code below to embed this comment.
  179. Sie sind auf der Such nach einer Kreditkarte oder suchen ein geeignetes Zahlungsmittel für den Urlaub. Mit einer Kreditkarte (englisch: credit cart) haben sie genau das richtige gefunden. Wir bieten ihnen eine Barclaycard an, diese kombiniert Mastercard und Visa in einer Karte. Wollen sie hingegen Urlaub machen und abnehmen ist Fastenwandern genau das richtige für sie. Fasten und wandern sie, Fastenwandern in den Vogesen ist gesund und macht spass. Bücher, DVDs, kann man online einkaufen, dort gibts alles günstig auch Software ohne Versandkosten. Besuchen sie Bücher, DVDs günstig kaufsonline machts möglich.

    Copy & paste the code below to embed this comment.
  180. I really like this idea…however I wanted to see if it really degraded to an unordered list in Netscape 4.7 (mac). It doesn’t.

    Now, I don’t intend on caring too much about this browser, but I’ve been reading Zeldman’s book and this website and have loved them both simply because they present new techniques that can transcend all the difficulties I’ve been experiencing.

    How come the sprite technique doesn’t just show up as an unordered list for me in NS4.7 Mac?

    Copy & paste the code below to embed this comment.
  181. Always looking for new ways in which to implement CSS and this certainly is a good one. I’ve already played about with it and found it quite easy and it seems to be an extremely good way to present things.
    Wonderful tutorial, many thanks.

    Copy & paste the code below to embed this comment.
  182. Hello, studying your great tutorial and trying to get to the same results I have some big problems with this button-thing. Even with a exactly same picture and your css-code (!) I don’t get to the same result… How do you count the values for the image itself and the borders and how do you get this image in the middle of the page without coding it???
    I’m willing to learn but now I need a litte or more help. Thanks a lot!

    Copy & paste the code below to embed this comment.
  183. Hello, in the meantime paul o’brien from sitepoint helped me with my centering-problem. Shorthand-coding is not my speciality… (margin top and bottom with px and right/left with “auto”).
    The rest of the story I solved with a little help from my partner who askes the right questions. But I still don’t understand why you used the dummy-background-image for the ul – that makes no sense to me. Also the 1px add to the width of the picture/ul I see but don’t understand.
    So if you, dave, or somebody else could explain me, I would appriciate!
    Susanne

    Copy & paste the code below to embed this comment.
  184. Once again you guys really make me feel like an amateur.

    Just when i thought i had a handle on it….

    Copy & paste the code below to embed this comment.