CSS Sprites2 - It’s JavaScript Time

by Dave Shea

86 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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??

    Cheers
    Archie

    Copy & paste the code below to embed this comment.
  4. 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.
  5. 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.
  6. 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.