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();”>
2 Comments so far
Leave a comment
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Someone recently introduced to me a new technique that involves creating a single image containing both the standard and hover states then simply adjusting the position of the image on hover. In it’s standard state, only the standard image is displayed. This is by far the best workaround for this issue I have seen. I’ve used the technique at http://www.bustedceiling.com on the main page for the section areas.
Comment by Janea May 14, 2008 @ 9:34 amSomehow i missed the point. Probably lost in translation
Anyway … nice blog to visit.
cheers, Desultory.
Comment by Desultory June 18, 2008 @ 11:45 pm