CSS Image Swap Menu Options

[BenignDesign]

I am assuming at this point that anyone can submit a tutorial. If I am incorrect in this assumption, please let me know. Second, I had posted this little ditty in my blog, but since no one reads it, I thought I'd post it here. Hopefully, someone will be able to use it.

Anyway, here is a nice little menu technique with no javascript!

The menu is made up of images - each button will need two images (one for the up-state, one for the down-state) and these images will need to be the same size. This example uses 5 buttons with up-state and down-state images like these:

(Up-state)
(Down-state)

Please also note the HTML images are static, meaning they are always present, merely covered up by the CSS images on mouse-over. This could make for some interesting designs using transparencies.

The CSS code (buttons in down-state):

CODE

body {background-color: #ffffff;}

/*Start button 1*/
div.nav1 {
height: 50px;
width: 150px;
margin-top:15px;
padding:0;
background-image:url("img/btn_down1.png");
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {display:block;}

div.nav1 img {width:100%;height:100%;border:0;}

div.nav1 a:hover img {visibility:hidden;}
/*End button 1*/

/*Start button 2*/
div.nav2 {
height: 50px;
width: 150px;
margin-left:153px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down2.png");  
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {display:block;}

div.nav2 img {width:100%;height:100%;border:0;}

div.nav2 a:hover img {visibility:hidden;}
/*End button 2*/

/*Start button 3*/
div.nav3 {
height: 50px;
width: 150px;
margin-left:306px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down3.png");
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {display:block;}

div.nav3 img {width:100%;height:100%;border:0;}

div.nav3 a:hover img {visibility:hidden;}
/*End button 3*/

/*Start button 4*/
div.nav4 {
height: 50px;
width: 150px;
margin-left:459px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down4.png");  
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {display:block;}

div.nav4 img {width:100%;height:100%;border:0;}

div.nav4 a:hover img {visibility:hidden;}
/*End button 4*/

/*Start button 5*/
div.nav5 {
height: 50px;
width: 150px;
margin-left:612px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down5.png");
}

div.nav5 a, div.nav5 a:link, div.nav5 a:visited {display:block;}

div.nav5 img {width:100%;height:100%;border:0;}

div.nav5 a:hover img {visibility:hidden;}
/*End button 5*/

The HTML code (buttons in up-state):

CODE

<div class="nav1"><a href="#"><img src="img/btn_up1.png" alt="" /></a></div>  <!--Button 1 static image-->
<div class="nav2"><a href="#"><img src="img/btn_up2.png" alt="" /></a></div>  <!--Button 2 static image-->
<div class="nav3"><a href="#"><img src="img/btn_up3.png" alt="" /></a></div>  <!--Button 3 static image-->
<div class="nav4"><a href="#"><img src="img/btn_up4.png" alt="" /></a></div>  <!--Button 4 static image-->
<div class="nav5"><a href="#"><img src="img/btn_up5.png" alt="" /></a></div>  <!--Button 5 static image-->

Two samples of this code in action can be found here.

Happy coding!