Who likes this?

css image swap

You will see that itâ€™s pretty basic â€“ setting width and height attributes for the image, and basically just telling the browser â€œwhen someone hovers over the image, make it disappearâ€ â€“ and it simply reveals the background image for the div â€“ your â€œhoverâ€ state.

This, of course, will work in all manner of ways. If you have a navigational list, simply replace the with

. You will also have to separate them â€“ if youâ€™re using 12 different images (6 images for the â€œonâ€ state, and 6 for â€œoffâ€ â€“ 2 images for each link), youâ€™ll have to set 6 different classes for each image, since none will have the same images representing them.

So yes, it does increase your CSS filesize. But, if youâ€™re looking for a certain type of display, and you (or your client) desires a particular font, size and color for certain elements on the site, this is an excellent alternative to using a javascript image replacement. An added bonus â€“ users who have javascript turned off in their browsers will still see the rollover effect.

Now, keep in mind, you have to deal with IE. (yeah, I bet you werenâ€™t expecting that!) Well, the thing with IE is, it has problems caching background images. So if you move your mouse over the above stuff in IE, itâ€™ll change as expected â€“ but if you move ever so slightly, youâ€™re going to see the blue flash back over. So as you slowly move your mouse across the image, itâ€™ll flicker â€œredblueredblueredblueâ€ â€“ which is as annoying as hell.

This is actually easy to fix. In your header (or if youâ€™re using a conditional comment to pull in an external stylesheet for IE, simply add this line to the bottom of the IE-specific stylesheet):

You must be sure that, for IE, that the â€œbackground-positionâ€ attribute is NOT set. If you set a background-position for the div, then the flicker will reappear.