Precaching images for rollovers (cross-browser)

[digitalmatt]

Just curious about everyone's techniques for precaching css image rollovers.

I know modern browsers will parse through the css and cache background images automatically. But if I want image rollovers to work without that "flicker" that you get in older browsers like IE6 (and I think even the newest Opera does it as well) then there are two methods that I know of:

1. Dump all the images that will serve as my rollover states into a hidden div on the page. I'd rather not do this because its semantically incorrect, and calls for extraneous markup.

2. Assign the image paths to the src property of an image object with JavaScript. This is probably the preferred method, but I'd rather avoid using the JavaScript if I can.

What do you guys suggest?

[ajcates]

I apply a background image to divs that would not normally have one, and change the position of the image so it sits way off screen.

I get clean xhtml, not clean css, but with ie6 hacks you never ever get clean css.

[jwilliam]

A friend of mine (also my co-worker), who happens to be a designer, uses the same method as ajcates. He makes his rollover image and regular image in the same file... one on top of the other. Then, his hover class just moves the image so that you see the rollover image instead of the regular one.

When I encountered the same issue, I wrote a javascript function to loop through all the css and cache any background images it found. This worked well, and it shows that there are almost always a multitude of solutions for any given problem. However, in this situation (and I really hate admitting this) I think ajcates solution is better because it will still work if the user has disabled javascript.

[digitalmatt]

I almost forgot about that method, and I actually use it on my own site. Dee dee dee. Thanks for your feedback guys.

[McGuffin]

I use a similar method but use the rollovers in the same image as the dead state. Say the button needs to be 100x60, I'll create an image that is 100x120 with the dead state at 0,0 and the rollover state at 0,60 with the following CSS:



#nav a {
text-indent: -2000em; /* you can add text to the links so screenreaders can read */
background-repeat: no-repeat;
background-position: 0 0;
display: block;
width: 100px;
height: 60px;
}

#nav a:hover {
background-position: 0 60px;
}

#nav a#nav-1 {
background-image: url(images/nav1.gif);
}

#nav a#nav-2 {
background-image: url(images/nav2.gif);
}




<div id="nav">
<a href="#" id="nav-1">Nav 1</a>
<a href="#" id="nav-2">Nav 2</a>
</div>

[digitalmatt]

I actually thought that's what they were talking about -- that's the one I use as well.

[digitalmatt]

I use a similar method but use the rollovers in the same image as the dead state. Say the button needs to be 100x60, I'll create an image that is 100x120 with the dead state at 0,0 and the rollover state at 0,60 with the following CSS:



#nav a {
text-indent: -2000em; /* you can add text to the links so screenreaders can read */
background-repeat: no-repeat;
background-position: 0 0;
display: block;
width: 100px;
height: 60px;
}

#nav a:hover {
background-position: 0 60px;
}

#nav a#nav-1 {
background-image: url(images/nav1.gif);
}

#nav a#nav-2 {
background-image: url(images/nav2.gif);
}


<div id="nav">
<a href="#" id="nav-1">Nav 1</a>
<a href="#" id="nav-2">Nav 2</a>
</div>


This actually just made me think of something else. What I do is wrap the text in a span tag and either give it a class or reference it hierarchially (sp?). So something like this



<li id="nav1"><span class="hidetext">Nav Item 1</span></li>


.hidetext {
display: none;
}
Do screen readers still pick up on that if its set to display none? If you set the text indent to -9999px or something like that just what if there's that one person who's got a monitor resolution that high (though unlikely).

[Jeff Wheeler]

Do screen readers still pick up on that if its set to display none? If you set the text indent to -9999px or something like that just what if there's that one person who's got a monitor resolution that high (though unlikely).

I think some might detect the display: none;, so I use the negative indent trick. However, I use em units instead of pixels, so that as the user increases his font size, the text gets further away. It seems to solve your problem.

By the way, the positioning trick mentioned above was most famously written in this article (http://wellstyled.com/css-nopreload-rollovers.html), and is most often called pixy’s rollovers. :)