If you use background images for hover effects with CSS (for example links hover effects) in IE you don't get a nice effect, because the "mouseover" image is always loading, creating a "gap". So it's good to have the "mouseover" images preloaded. There are numerous of ways to preload images, but usually what I'm doing is loading those images in a hidden layer. For example: if you have a css:
a.menu { background: transparent url('menu_off.gif') no-repeat left top }
a.menu:hover { background-image: url('menu_on.gif') }
you'll want to have the images menu_off.gif and menu_on.gif preloaded. The way I'm doing it is by adding to the top of my webpage right after the <body> tag the following code
<div style="display:none; visibility:hidden; position:absolute; left: -3000px;">
<img src="menu_off.gif"/>
<img src="menu_on.gif"/>
</div>
1 comment:
The best technique I've found for accomplishing this is to use one image for both the on and off states and change the background-position on hover.
Post a Comment