How do I do flickerless image switch on hover with CSS only ?

Question

The code is as follows:

<div id="compv-navbar">
        <a href="#"><img src="image1.png" id="icon1"></a> | 
        <a href="#"><img src="image2.png" id="icon2"></a> | 
        <a href="#"><img src="image3.png" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
 </div>

Assume that each image has another image with suffix '-hover' that will be image to be replaced on hover.

Answer 1

CSS isn't meant to do this, it controls presentation, not the location of files. If you really need this however, here's a little work-around they should work (I haven't actually tested this yet).

HTML

<div id="compv-navbar"> 
        <a href="#"><span id="icon1"></span></a> |  
        <a href="#"><span id="icon2"></span></a> |  
        <a href="#"><span id="icon3"></span></a> |  
        <span id="view_name"> Random Text</span> 
 </div>

CSS

#icon1
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1.png");
}

#icon1:hover
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1-hover.png");
}

(Make sure you add this for each image.)

Answer 2

Here is what i would do:

<div id="compv-navbar">
        <a href="#" id="icon1"></a> | 
        <a href="#" id="icon2"></a> | 
        <a href="#" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
</div>

a#icon1{
background:url("image1.png") no-repeat;
}
a:hover#icon1{
background:url("image1-hover.png") no-repeat;
}
a#icon2{
background:url("image2.png") no-repeat;
}
a:hover#icon2{
background:url("image2-hover.png") no-repeat;
}
a#icon3{
background:url("image3.png") no-repeat;
}
a:hover#icon3{
background:url("image3-hover.png") no-repeat;
}

Answer 3

Well, totally flickerless image switch you can do only with image preloading. In any other case browser will load image only on hover. I wrote a small example about image switching.

Another solution is to use CSS sprites and switch image on hover using background-position.