Avoid flickering on mouse over

Question

Hi

I have a simple link in a menu

<a id="Home" href="Amico-Bio-Home-Page"></a>

to which i apply the following style

#Home{
background-image:url(../Images/Menu/home.png);

background-repeat:no-repeat; border:none; display:block; height:70px; text-decoration:none; width:78px; float:left; padding:0 7px; }

#Home:hover {
 background-image: url(../Images/Menu/homeOn.png);
}

when i go over the link the images are swapped.

while swapping the images the link disappear for an instant.

Do you know any way to avoid it?

thanks

Answer 1

Sprites: http://stackoverflow.com/questions/1477332/is-css-sprite-a-good-technique

Answer 2

You should use image sprite sheets. For a detailed tutorial on them look here: http://css-tricks.com/css-sprites/

Answer 3

html part

<a><img src="homeOn.png" alt="" width="" height="" /></a>

css part

a {height:px;width:px;background-image:url(home.png)}
a:hover img {visibility:hidden}

added bonus no more IE6 flicker