Hover effect isn't working fine

Question

How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :

#middlefoto{
    background-image:url(../images/middleblack.jpg);
    margin-left:1px;
    height:158px;
    width:333px;
    }
#middlefoto:hover{
    background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
    }

Answer 1

The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:

function preloadImages(sources)
{
    var img = new Image();
    for (var i = 0; i < sources.length; i++) {
        img.src = sources[i];
    }
}

preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);

Answer 2

Use sprites with positioning.

Find more information at W3 Schools

Answer 3

Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.

<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />

(don't really use inline styles) Then, if you're using jquery

$(document).ready(function(){ $('.preloader').remove(); });

to clean up.