Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / navbar/mouseover make a link stay highlighted when its clicked

navbar/mouseover make a link stay highlighted when its clicked

Locked

Views: 3,590

Results 1 to 2 of 2
This thread is locked. New replies are disabled.
9 Jun 2010, 6:36 PM
#1
missanna avatar

missanna

New Zenner

Join Date:
May 2010
Posts:
15
Plugin Contributions:
0

navbar/mouseover make a link stay highlighted when its clicked

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

10 Jun 2010, 6:47 AM
#2
10west avatar

10west

New Zenner

Join Date:
Feb 2010
Location:
Arizona
Posts:
50
Plugin Contributions:
0

Re: navbar/mouseover make a link stay highlighted when its clicked

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
}