navbar/mouseover make a link stay highlighted when its clicked

[missanna]

Please help been trying to figure this out for like 1week and been searching all forum all day, noone seems to know how to do it :S gaah


I have 4 buttons - Home, New Products... etc.

I want a mouse over so that when i mouse over the Home button, the button changes color/image and when i MouseOut, it goes back to the original color/image.

Also when the link is clicked and the page loads, I would like the link/image to stay highlighted so that the visitor knows which page he/she is on.


Thanks,


I have managed to do the mouse over and mouse out but not to make it stay highlighted with this code:

  <style type="text/css">
 A#vbUL_ohs16a{display:none}
 </style>

 <table id="vista-buttons_com_idohs16" width="0" cellpadding="0" cellspacing="0" border="0"><tr>
   <td style="padding-left:0px" title =""><a href="index.php?main_page" onmouseover='xpe("ohs16o");' onmouseout='xpe("ohs16n");' onmousedown='xpe("ohs16c");'><img id="xpi_ohs16" src="hm-files/btohs16_0.png" name="vbohs16" border="0" alt="Home" /></a></td>



   <script type="text/javascript"> var vbImgPath="hm-files/"</script>
  <script type="text/javascript" src="hm-files/scohs16.js"></script>

Really appreciate any help... <3

[10west]

This is a section from a stylesheet I used to control the Anchors according to what status they are at, mine kept visited and active the same color, but changing the visited color will produce the effect for user refernce... see css comment below

.dropmenu A:visited
{
PADDING-RIGHT: 1px;
DISPLAY: block;
PADDING-LEFT: 1px;
FONT-WEIGHT: bold;
FONT-SIZE: 15px;
PADDING-BOTTOM: 1px;
MARGIN: 1px;
WIDTH: 150px;
COLOR: #CCCCFF; /* <<<change this color, as mine keeps visited and active links the same color, experiment even with these attributes of the html tag, and I think you can get it to work by researching the A anchor tag a little, and modifying it inline, or from a stylesheet to do what you want... */
PADDING-TOP: 1px;
FONT-FAMILY: Palatino Linotype;
BACKGROUND-COLOR: #000099;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
.dropmenu A:active
{
PADDING-RIGHT: 1px;
DISPLAY: block;
PADDING-LEFT: 1px;
FONT-WEIGHT: bold;
FONT-SIZE: 15px;
PADDING-BOTTOM: 1px;
MARGIN: 1px;
WIDTH: 150px;
COLOR: #CCCCFF;
PADDING-TOP: 1px;
FONT-FAMILY: Palatino Linotype;
BACKGROUND-COLOR: #000099;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
.dropmenu A:hover
{
PADDING-RIGHT: 1px;
PADDING-LEFT: 1px;
FONT-WEIGHT: bold;
FONT-SIZE: 15px;
PADDING-BOTTOM: 1px;
MARGIN: 1px;
WIDTH: 151px;
COLOR: white;
PADDING-TOP: 1px;
FONT-FAMILY: Palatino Linotype;
BACKGROUND-COLOR: #000099;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}