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

[Jody Cleveland]

Hello yet again,

> 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].
> 
> [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?

- jody