Search code examples
javascripthtmlbrowserrollover

HTML Image Rollover - Image isn't fully loaded before rollover?

I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.

The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.

How can I fix this so the rollover is seamless? Is there a way to preload the image?

Solution

  • 1. Answer: Use CSS Sprites

    2. Answer: Or create something like this:

    <a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

    And the CSS:

    img.nohover {

    border:0

    }

    img.hover {

    border:0;

    display:none

    }

    a:hover img.hover {

    display:inline

    }

    a:hover img.nohover {

    display:none

    }