Alt-Web Design & Publishing
Pure CSS Disjointed Image Rollovers

CSS Code

#Relative {position: relative; margin:0 auto 14px auto; min-height:200px; _height:200px /**for IE6 Only**/ }

/**menu**/

#navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;}

#navlist li {
list-style: none;
margin: 0;
display: inline;}

#navlist li a {
padding: 0.5em 0.5em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;}

#navlist li a:link { color: #448; }

#navlist li a:visited { color: #667; }

#navlist li a:hover, #navlist li a:active, #navlist li a:focus{
border-color: #FF9900;
color: #FFF;
background: #0099FF;
visibility: visible;}

/**Default Image container**/

#defaultImage {
visibility:visible;
display:block;
position:absolute;
left:49px; /**adjust position in pixels or % **/
top:50px; /**adjust position in pixel or %**/
}

/**disjointed image rules**/

#navlist li a span {
visibility:hidden;
display:block;
position:absolute;
left:49px; /**position same as default image layer above**/
top:50px; /**position same as default image layer above**/
color:#666; }

#navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span {
visibility:visible;}

/**end menu**/

HTML Code

<div id="Relative">

<!--Default Image goes here-->

<div id="defaultImage">
<img src="DefaultImage.jpg" /></div>

<!--begin menu-->

<ul id="navlist">

<li><a href="#">Menu Item 1 <span><img src="image1.jpg" alt="#" /><br />optional text goes here</span></a></li>

<li><a href="#">Menu Item 2 <span> <img src="image2.jpg" alt="#" /><br />optional Item 2 text goes here</span></a></li>

<li><a href="#">Menu Item 3 <span> <img src="image3.jpg" alt="#" /><br />optional Item 3 text goes here</span></a></li>

<li><a href="#">Menu Item 4 <span> <img src="image4.jpg" alt="#" /><br />optional Item 4 text goes here</span></a></li>

</ul> <!-- end menu -->

</div> <!-- end Relative -->