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