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"> </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