<div id="navigation>
<ul class="navlist">
<li><img src="images/btn1.gif"/></li>
<li><img src="images/btn2.gif"/></li>
<li><img src="images/btn3.gif"/></li>
</ul>
</div>
How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...
These links must be images.
There's a lot of ways to do this. Basically, move one image off the screen when you hover. Or you could change the z-index of two images on top of each other when you hover, or you could do it with background images, or with the display option.
I prefer using the display option, since the CSS is quite simpple.
Since it's done with classes you can just add as many buttons as you want.
Here's the code for a page that contains the HTML and CSS together. The DOCTYPE declaration is necessary to make it work in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
a img {
border:none;
}
ul {
list-style-type: none;
}
img.defaultSt {
display: inline;
}
img.hoverSt {
display: none;
}
li:hover img.defaultSt {
display: none;
}
li:hover img.hoverSt {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="navlist">
<li>
<img class="defaultSt" src="http://mrg.bz/vh60HV" />
<img class="hoverSt" src="http://mrg.bz/CcDOmL" />
</li>
</ul>
</div>
</body>
</html>
You could try using a transparent image as the link primary and then use css to alter the background
<style type="text/css">
a.img1, a.img1:link { background-image: url(images/btn1.gif); }
a.img1:hover { background-image: url(images/btn1_over.gif); }
a.img2, a.img2:link { background-image: url(images/btn2.gif); }
a.img2:hover { background-image: url(images/btn2_over.gif); }
a.img3, a.img3:link { background-image: url(images/btn3.gif); }
a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>
<div id="navigation>
<ul class="navlist">
<li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
</ul>
</div>
You just have to keep in mind the size of the images in question.
If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.
CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):
<style type="text/css">
.navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
.navlist li:hover { background-image: url('images/image2.gif'); }
</style>
HTML:
<div id="navigation">
<ul class="navlist">
<li></li>
<li></li>
<li></li>
</ul>
</div>