Avoid flickering on mouse over

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 li开发者_StackOverflownk the images are swapped.

while swapping the images the link disappear for an instant.

Do you know any way to avoid it?

thanks

Sprites: Is css-sprite a good technique?

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

I would suggest avoiding images altogether and use CSS to style your links. You can accomplish a lot with CSS3 background and border gradients, text-shadows, and more. Check out: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ and http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques for inspiration and code.

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