This technique is a rather simple workaround that is supported by most browsers. I am still learning CSS so there may be better and cleaner ways of doing this. If you have suggestions please send me an email at: chris@lavendise.com
1. Create a div layer that will be your background layer showing the rollover state when your mouse is not on the rollover.
2. Create a transparent gif which can be 5x5 and you just expand it to be the size you need.
3. Create a div layer that uses the transparent gif and place this over the background div layer with the image you want to turn into a rollover:
<div id="menu">
<a class="button" href="who.htm">
<img border=0 src="images/blank.gif">
</a>
</div>
4. For each rollover you need to add one of the following statement and the
rollover graphics that are supposed to swap out:
#menu {
position:absolute;
margin-top:15px;
left:393px;
display:block;
width:72px;
top: 69px;
z-index: 11;
}
a.button2, a.button2:visited {
display:block;
width:72px;
height:38px;
background-color:transparent;
text-align:center;
color:#000;
line-height:28px;
text-decoration:none;
font-family:arial, sans-serif;
font-weight:bold;
margin-top:5px;
}
a.button2:hover {
background:url(images/rollover.jpg);
background-position:top left;
}
a.button2:active {
background:url(images/holdmousedown.jpg);
}
Now you are done! You can see my a live version at:
http://www.boomerangauctions.com
