When using image replacement techniques on hover, many times there will be a flicker in between state changes. I’ve found a couple workaround for this. One is to use Javascript to preload the images. Another is to fake it by adding the hover image behind the normal state image and setting it’s visibility property to hidden using CSS. This way it loads the image into memory, but doesn’t display it. Or you can use a combination of the two techniques. For instance, create a Javascript function that uses styling to load the image and set it as the element background, then call the function on page load. Here’s an example:
Add the following Javascript function at the top of an HTML file.
<script type=”text/javascript”>
function preloadImages()
{
document.getElementById(‘elementID’).style.backgroundImage = ‘url(images/image-hover.png)’;
}
</script>
Call the function in the body tag of the HTML file using the onload event.
<body onload=”preloadImages();”>
