[support] How to have current menu item highlighted when it's an image?

[Stefan Borchert]

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">&nbsp;<span class="info">&nbsp;</span></li>
 <li id="item2">&nbsp;<span class="info">&nbsp;</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