Greetings,
I'm attempting to make a simple horizontal navbar with three image links,
and with those images replaced on hover and active... and I'm not sure of
the proper CSS to do this, though I've tried unsuccessfully.
This is the site: www.sunbadgeco.com/sunmetal/index.htm
Here's my simple centered navbar with extraneous (alt) coding removed:
<div id="navmain">
<a href="artists.htm"><img src="images/artists_inactive.jpg" border="0"
width="148" height="35"></a>
<img src="images/spacergraphic.gif" width="55" height="35">
<a href="contact.htm"><img src="images/contact_inactive.jpg" border="0"
width="163" height="35"></a>
<img src="images/spacergraphic.gif" width="55" height="35">
<a href="about.htm"><img src="images/about_inactive.jpg" border="0"
width="90" height="35"></a>
</div>
I'd like each link image named "_inactive.jpg" to be swapped with the same
size "_active.jpg" when hovered over. The lights behind the text are
supposed to go from dim to bright using this method. Any help would be
greatly appreciated.
My navmain CSS follows:
#navmain {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}