Subscribe to Collegiate Chronicles        RSS Feed
-----

CSS Image Swap Menu

Icon Leave Comment
A cute little menu technique with no javascript!

The CSS code:
body {
background-color: #ffffff;
}

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;
}

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;
}

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;
}

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;
}

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;
}



The HTML code:
<div class="nav1">
	<a href="#"><img src="img/btn_up1.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav2">
	<a href="#"><img src="img/btn_up2.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav3">
	<a href="#"><img src="img/btn_up3.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav4">
	<a href="#"><img src="img/btn_up4.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav5">
	<a href="#"><img src="img/btn_up5.png" width="150" height="50" alt="" /></a>
</div>



Each button consists of two images. These images need to be the same size. Also, the CSS images are static - they are always there - they are simply covered by the HTML image on mouse-over. This could make for some interesting effects using transparencies and backgrounds.

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

Happy coding!

0 Comments On This Entry

 

July 2014

S M T W T F S
  12345
6789101112
13141516171819
202122 23 242526
2728293031  

Recent Entries

Recent Comments

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)