CSS Vertical Sprite - Active state?

CSS Vertical Sprite Active

[CeeInTx]

I finally found, much to my great relief, a tutorial that made sense and worked (!8-)!) in this forum by Fotiman (http://www.webmasterworld.com/css/4022607.htm)

Thank you so much!

Now, I'm trying to figure out how to have the button stay in the hover state when the user is on that particular page. Or I guess I could design a different image for the active state. But the point is getting the image to stay in either state when on the page.

Here's a portion of the CSS that was used in the post above:

ul#leftnavigation #home a {background-position: 0px 0px; height: 30px;}
ul#leftnavigation #accessories a {background-position: 0px -31px; height: 30px;}
ul#leftnavigation #corpgifts a {background-position: 0px -61px; height: 30px;}

ul#leftnavigation #home a:hover {background-position: -129px 0px;}
ul#leftnavigation #accessories a:hover {background-position: -129px -31px;}
ul#leftnavigation #corpgifts a:hover {background-position: -129px -61px;}

I have tried replacing a:hover with a:active but that's not working.

What am I missing?

Thank you!

[alias]

Welcome to the webmasterworld forums.

You're misunderstanding the usage of the :active selector. The :active selector is only applied to an element which is clicked (or otherwise activated). It will not be in place when you reload the page.

You will need some backend intervention to highlight the active element for example by adding a classname to it.

[CeeInTx]

Ah, OK. Does 'backend entervention' mean some kind of server side scripting? Not sure I understand where to go next. Thanks!

[alias]

Let me just break it up a bit.

You want to highlight the active menu item when the page loads.

Unless you're using some non-page-refreshing ajax interface, the only way to do it is make the server to parse the URL that is being loaded, match it against the links on your menu, and add the classname of your choice to the link which matches the URL.

If you're using a CMS of some kind, there's a high probability, that it's already happening -- for example, Wordpress does that very nicely.

Hope that helps.

[CeeInTx]

Oh, dear.

I'm using Dreamweaver (html and css). I don't understand what you mean by "make the server parse the URL" etc. Can you illuminate?

Thanks!