how to change an image in the hyperlink corresponding to the active page?

EDITING QUESTION TO ADD THE HTML ->

<li><a href="about.php"><img src="images/about.png" width="16" height="16" />ABOUT</a></li>
<li><a href="mission.php"><img src="images/mission.png" width="16" height="16" />MISSION</a></li>
<li><a href="contact.php"><img src="images/contact.png" width="16" height="16" />CONTACT</a></li>

These are the three hyperlinks, and as you see there are small images beside these links. Now what I want to achi开发者_JAVA百科eve is, when say page MISSION is the active page, I want the image to be mission2.png (instead of mission.png originally, when that page was NOT the active page).

Hope the question is bit clearer now.

<>>

Question on HTML/ CSS -

Example scenario - There are three webpages - About, Mission, Contact - and the links are such that you have a 10x10 pic beside each of these links like this:

[pic] About
[pic] Mission
[pic] Contact

(where [pic] stands for the corresponding 10x10 image).

I would like to design these hyperlinks such that the [pic] would be blue in color for the ACTIVE page, and all other [pics] would be black in color.

For example,suppose the user is on the MISSION page, then [pic] corresponding to Mission hyperlink would alone be BLUE, all others would be in BLACK.

Note- the blue and orange pics are same, only the color changes between each of these links.

Could you please guide me as to how to design this 'active page' hyperlink design? I know how to tag the link and the page with ids and then change the color of the hyperlink so that the active page's hyperlink would be in blue and others in black, but I seem to run out of ideas on how to change the corresponding 10x10 image also.

HTML

<div id="menu">
  <a>Menu Item 1</a>
  <a>Menu Item 2 </a>
  <a class="active">Current page</a>
</div>

CSS

#menu a
{
  background: some background;
}

#menu a.active
{
  background: some other background;
}

To prevent using multiple images for the menu items you can use an image sprite sheet that will save some rendering time.

All you need to do is work out how to get the current page and apply the active class in your language of choice, there are plenty of ways to do this.

Probably the easiest thing to do is to use background imgs.

You can then change them on hover.

Also you can add an active class for each page and set the background-img for that too.

I can't tell if you're talking about a hover effect or just a static, this is the page you're on and so I am changing the color of the this image. It reads like that, but your link shows a roll over effect.

If you're looking to make a static change based on the page a user is currently here are two popular options for you.

1. Server side processing. Have the server figure out what page you're on and change the image path/CSS class for that specific link. This is can be done a million different ways and it all depends on your server-side processing (PHP, ASP.NET, etc)

2. Using something like jQuery to read what page the user is on from the address and then change the image path/CSS class to that page's link.