Image Swap

Author: Josh Siegel

Comments: This list involves a background image swap

Browser support chart

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

#navcontainer ul
margin: 0;
padding-top: 20px;
list-style-type: none;
text-align: center;
font-family: arial;
font-size: 14px;
height: 82px;

#navcontainer ul li { display: inline; }

#navcontainer ul li a
text-decoration: none;
padding-top: 25px;
padding-right: 55px;
padding-bottom: 35px;
padding-left: 50px;
color: #000;
background: url( top left no-repeat;
width: 146px;
height: 82px;

#navcontainer ul li a:hover
color: #fff;
background-position: 0 -82px;
width: 146px;
height: 82px;

Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.