CSS Sprites2 - It’s JavaScript Time

by Dave Shea

86 Reader Comments

Back to the Article
  1. One glitch I’ve seen that is driving me crazy, and it only happens for my Mac in my Firefox, not in my Safari and not for my PC friend in Internet Explorer…

    When I hover over a button, then hold the cursor there for a second or two, and move it WITHIN the <a> the sprite refreshes.  I don’t even move it outside of the button, any movement within the button after a delay refreshes the image and causes a new fade in.  Its similar to a flicker or a flash, and completely ruins the continuity of the menu.

    Any ideas what this is and how to solve this?

    Copy & paste the code below to embed this comment.
  2. I found a machine with IE6, to test on, and it works!  so, i guess it’s just an issue with testing in IE6 on my mac, using a virtual machine / VMware Fusion.  Thanks!

    Copy & paste the code below to embed this comment.
  3. Great article, I may say. I’ve tried to attach this effect on my Wordpress blog these two days but with no success. No matter how much I trie I can’t get it to work with the built-in list command (wp_list_pages) in Wordpress. Does anyone have any suggestions on how to make this work with Wordpress?


    Copy & paste the code below to embed this comment.
  4. Finally after a few months waiting on my queue, I completed the mootools port:


    same compatibility level as the version in this article, so if you are into mootools you can get the same experience in “the other side of the fence”.

    Copy & paste the code below to embed this comment.
  5. Hi. I don’t like absolutely positioned navigation elements. They’re useless for practical purposes.

    I am trying to get this example working with the following HTML:

    <ul id=“nav”>


    My CSS is like this:

    /* Nav */
    ul#nav { padding: 0; display: block; float: right; margin: 5% 20% 0 0}
    ul#nav li { background: transparent; margin:0; padding:0; height: 20px; list-style:none; width: 130px; display: block; border: 0 }
    ul#nav li a { background: url(/av/nav.png) no-repeat; width: 130px; display: block; height: 16px; text-align: left; text-indent: -10000%; margin:0; overflow: hidden }

    a#arti { background-position: 0 0; }
    a#arti:hover, a#arti:active { background-position: -129px 0px;}
    li.curr a#arti, li.curr a#arti:hover { background-position: -258px 0px; }

    ..and so on. Basically the code is NOT working. What do I need to do to make sure non-absolute items work too?

    Copy & paste the code below to embed this comment.
  6. Whats with the textile drivel here? A website about web design cannot use a more modern system for commenting that allows us to post some simple code?

    Copy & paste the code below to embed this comment.
  7. For so much effort as to include a JS file and whatnot, this simply does not work.

    (1) In Firefox in Mac (which is quite a prevalent environment now) it flickers forever.

    (2) Doesn’t work consistently in IE7. Sometimes the animation doesn’t happen at all, and other times happens jerkily.

    (3) This whole shebang doesn’t work with a vertical sprite at all. Silly shite.

    Sorry. I appreciate the effort on the part of the writer, but even with loads of tweaking, this drivel simply does not work with vertical sprites because of the DIV that is appended to the css links. That may work for horizontal sprites, but in a vertical menu it is all over the place.

    Copy & paste the code below to embed this comment.
  8. This menu is beautiful and is a wonderful tutorial for those new to jquery and manipulating css. Thanks very much for the post, I have benefitted from this tremendously!

    Copy & paste the code below to embed this comment.
  9. I love the way you have this packaged up. How difficult would it be to introduce parameters for the image positions as opposed to hard coding?

    Copy & paste the code below to embed this comment.
  10. Try as I might, I can’t get this to work. I’m seeing nothing on rollover (in FF3 Mac) and then, on rollout, it switches to the rollover state for a few milliseconds and then fades out. In Safari, when I rollover, it flickers and tries to run the fade in/fade out over each pixel I move the mouse. When I look in Firebug in FF3, rollout causes a slew of classes to be created and then they slowly remove themselves. In Safari, moving the mouse in rollover causes the same thing. Active state works fine, though.

    I thought it might be an issue with the newer version of jQuery, but I switched out 1.3.2 for 1.2.6 and still had the same issues.

    I have pretty much no experience with JS, so I’m at a loss to troubleshoot it. Any ideas?

    Copy & paste the code below to embed this comment.
  11. I’m also having issues with my buttons flickering in FF3 for the Mac and one of my associates sees it in FF3 for Windows.  However, when I check the page showing the final example in your article in the same browsers the rollovers work beautifully.  I’m using a similar structure in my menu and the same js file, so the only thing I can think that would be different is the CSS.  I’d love to figure out a fix for this because it’s a great effect.

    Copy & paste the code below to embed this comment.
  12. Thank you for the great article.

    By removing onmousedown- and onmouseup-events though I’ll reduce the size of the js and css in half, and still have awesome results.

    Copy & paste the code below to embed this comment.
  13. Hi There,
    Thanks for a great insight into jquery sprites!!
    I have tried to apply this tut to a menu I am working on and it seems to work fine apart from the selected state.

    I can only get a selected state to work for the second li item??

    I change the <ul class=“nav current- “> to my required state and nothing happens.

    My menu list is – Home, Team, Contact Us and Links. I have changed the references in the css and script.js (from example 5) to match and still n luck?

    Do you have any suggestions??


    Copy & paste the code below to embed this comment.
  14. I’ve been playing with this using transparent PNGs for the menu, and it is not working correctly….I think.

    When the page loads, I see is the menu starting position rendered correctly. However, the rollover events are not correct, because both the normal state and the hover state are being shown.

    I believe this is because the menu image is applied in two places, but only one is being turned off on events. The menu image is applied to “.nav” and to “.nav .home a:hover” but the “.nav” class background is not adjusted. So it continues to show through the :hover state due to the transparent nature of the PNG.

    Is there a solution for this? Help is very much appreciated.

    Copy & paste the code below to embed this comment.
  15. I just want to one pixel image repeat.however,the result is’t enough to answer my question,all about css sprites links,I need you help? thank you!

    Copy & paste the code below to embed this comment.
  16. Hy there.

    I tooked the time to read all the comments and saw that nobody asked about my problem.

    I managed to addapt the menu to my website and get rid of absolute position. But i’m having trouble, since my menu is generated, every li has multiple clases. How can i make the js code to work ..is there a posibility to ajust in such a matter that will get only the first class of the li?

    Thank you for your help.

    Copy & paste the code below to embed this comment.