Jody Cleveland schrieb:
Why not use pure CSS!? Each link have its own id and an image containing all versions (non-highlighted, highlighted, active). You can than select the image part by changing the background position with css (#item1:hover {}; #item1:active {}). The technique is called "image rollover". More details here [1] or at alistapart [2].
Brilliant! Not sure why I didn't think of that before. Is there a way to control two images with a rollover? I have the button state change, as well as, an image below it.
Hi Jody. Jup, its possible (with an ugly trick :-) ). You now have something like this: #item1 { background: transparent url('yourimage.png') no-repeat 0px 0px; } #item1:hover { background-position: 0px -50px; /* guess your image has a height of 50px */ }
Place an element which contains the second image within the list item: <ul id="nav"> <li id="item1"> <span class="info"> </span></li> <li id="item2"> <span class="info"> </span></li> </ul>
Then you have to hide the element by default: li .info { display: none; width: ...; height: ...; background: transparent url('yoursecondimage.png') no-repeat 0px 0px; }
and display it on hover: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ }
I haven't tested it yet but it should work.
hth,
Stefan