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;
    }

it depends on the speed in which the browser downloads the image. You can't show the original image while it loads because the original image has to be laded too — Eric Goncalves, Mar 07 '13 at 18:25

score 2 · Answer 1 · answered Mar 07 '13 at 18:27

2

Use sprites with positioning.

Find more information at W3 Schools

answered Mar 07 '13 at 18:27

Rafe

793
6
15

ha probably a better answer – Stop Slandering Monica Cellio Mar 07 '13 at 18:27
I know some people don't like w3schools but a 404 is just insulting :) Try http://css-tricks.com/css-sprites/ instead. – Rafe Mar 07 '13 at 18:33

score 0 · Answer 2 · answered Mar 07 '13 at 18:27

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.

RoccoC5 · Accepted Answer · 2013-12-29T21:20:24.727

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' ]);

Hover effect isn't working fine

3 Answers3