CSS to change menu image for current state

HTML & CSS
1

Hello,

I had a request from my customer to make the current page highlight in the navigation when that page is current. I obviously need to create a “current” state image that is slightly different, but not quite sure of the CSS I need to implement to make it ‘swap’ images when active.

http://delaney-brothers.com

Thanks ahead of time!

2

Hello noslenwerd.

I would very much consider using a sprite technique for this, rather than chopping up your images and making more server requests.

http://www.mezzoblue.com/tests/revised-image-replacement/

In that way you can have rollovers and the active state.

3

Thanks sdt. I will take a look at the link now.

4

sdt… I’m not sure I understand how to implement this correctly? Looks like there are a bunch of different examples on the page, but it does not explain how to integrate this into navigation?

5

If your images are already chopped up then just keep it that way it’s easier for you. Th following link is all the info you need. Just change the current state CSS with your new image. http://www.visibilityinherit.com/code/current-page.php

6

Here is another method, if any of those don’t work. You can do this in under a day. This is more of a step by step. It’s better to use sprites for the reasons explained there.