Hi, I would like to write about preloading images in Mozilla. I faced this problem many times and for a while the long-used-trick with a display:none div worked very well. So I happily created roll-over effects in image-based menus until one day…

Now the old trick is not functioning on Mozilla. The good guy is Internet Explorer and the bad guy is suddenly Mozilla. Surprised? Me too…

THE SOLUTION – is not necessary original and brain-blowing – but it’s working beautifully and with no CSS/HTML crazy tricks.

Instead of having the menu background like this

and the roll-over image like this:

we will create the menu background like this:

You can see the menu has doubled the height and the roll-over image is above the normal one – and now has 78px instead 39px. The CSS code will then look like this:

a.menu_home {
    height:39px;width:6.625em;color:#fff;text-decoration:none;float:right;
    background: url("images/home.jpg") bottom left no-repeat;
}
a:hover.menu_home {
    height:39px;color:#fff;text-decoration:none;
    background: url("images/home.jpg")  no-repeat top left;
}

this way the image will be loaded from the start and first we will display the bottom part and on mouse over we will display its top part. Simple, isn’t it?

You can see the working example and code here.

No related posts.