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

[Stefan Borchert]

Jody Cleveland schrieb:
> Hello yet again,
>> [...]
>> [1] http://wellstyled.com/css-nopreload-rollovers.html
>> [2] http://alistapart.com/articles/slidingdoors2/
>>     
>
> Ok, following the instructions from the first link, I have mouseovers
> working with just css. The only thing that's not working is the 'active'
> state.
>
> In css for each menu item, I have something similar to this:
> 	#menu-play a {
> 		display: block;
> 		width: 92px;
> 		height: 91px;
> 		background: url("img/play.png") 0 0 no-repeat;
> 	}
> 	#menu-play a:hover {
> 		background-position: -92px 0;
> 	}
> 	#menu-play a:active {
> 		background-position: -92px 0;
> 	}
>
> And, the html for each is similar to this:
>    <td id="menu-play"><a href="play.html"></a><span
> class="info">&nbsp;</span></td>
>
> But, when I click on the menu item for 'play', the active state is not
> honored. Any ideas what I may have wrong?
>   
Jup. Its quite simple. "a:active" points to a link that is selected 
("active") right now. You want to display the image part for an active 
sites link.
If you do some dynamic stuff (perhaps php) you can give the link a class 
called "active" and change your style to

	#menu-play a.active {
		background-position: -92px 0;
	}

<td id="menu-play"><a class="active" href="play.html"></a><span
class="info">&nbsp;</span></td>

Or (with static pages) insert a style rule in the specific page:
<style type="text/css">
#menu-play a {
	background-position: -92px 0;
}
</style>

hth,

 Stefan