highlight unhighlight link background?

[stevecop]

Hi, I'm trying to create menu that when a user clicks on "Link 1", it will highlight the link with a bgcolor of blue, while when the user clicks on "Link 2", "Link 1" will unhighlight and highlight "Link 2".

What I've been trying had got me to this:

<script language="JavaScript">
<!--

function highlight( )
{
undohighlight();

var oObj = event.srcElement;
oObj.style.color = "#FFFFFF";
oObj.style.background = "#000066";
}

function undohighlight()
{
var i
for (i = 0; i < 13; i++)
{
if(i.style.color == "#FFFFFF")
}
}
//-->
</script>

<table width="100%" border="0" cellspacing="1" cellpadding="0" class="body">
<tr>
<td><img src="http://localhost/images/pic.gif"></td>
<td><div onClick="highlight( );">Link 1</div></td>
</tr>
<tr>
<td><img src="http://localhost/images/pic.gif"></td>
<td><div onClick="highlight( );">Link 2</div></td>
</tr>
</table>

For this snippets, its working on the highlighting part, but I've no idea how to get the unhighlighting work. :(
I've done lots of search on google but no luck. Hope someone could help me here. Thanks in advanced.

[jdavia]

There are several JS files associated with this script giving the applet the instructions to carry out. Kind of complicated to make changes unless you are skilled.

Here is a round about way of accomplishing simular results for a menu if that is what you want it for.
This will change the cells color when you put your mouse in the cell, giving you the same effect

<table width="10%" border="0" cellspacing="0" cellpadding="10" bgcolor="#80ffff" bordercolor="#ff0080">
<tr>
<TR>
<!-- Row 1 Column 1 -->
<td id= "ignore" onmouseover="bgColor='blue'" onClick="window.location='YourPage.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b>

<font color="@ff0000" >RED</font></b></td>
</tr>

<TR>
<!-- Row 1 Column 1 -->
<td id= "ignore" onmouseover="bgColor='blue'" onClick="window.location='YourPage.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b>

<font color="@ff0000" >RED</font></b></td>
</tr>
<TR>
<!-- Row 1 Column 1 -->
<td id= "ignore" onmouseover="bgColor='blue'" onClick="window.location='YourPage.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b>

<font color="@ff0000" >RED</font></b></td>
</tr>
</table>

[stevecop]

Thanks for the reply jdavia,

however, the code you posted only does mouseover highlight. I wanted to highlight the "Link 1" only when click and when I click on "Link 2", "Link 1" will unhighlight and turns to highlight "Link 2". Is something like when you use your windows explorer.

[jdavia]

Here is a click version using mousedown and mouseup

<table width="30%" border="1" cellspacing="0" cellpadding="10">
<tr>
<td id= "ignore" onmousedown="bgColor='lightgreen'" onClick="window.location='page1.html'" style="cursor:hand" onmouseup="bgColor='#FFFFFF'" align="left" valign="center"> I'm green on the computer.</label> </td>
</tr><tr>
<td id= "ignore" onmousedown="bgColor='lightblue'" onClick="window.location='page2.html'" style="cursor:hand" onmouseup="bgColor='#FFFFFF'" align="left" valign="center"> Lightblue is nice.</label></td>
</tr><tr>
<td id= "ignore" onmousedown="bgColor='red'" onClick="window.location='page3.html'" style="cursor:hand" onmouseup="bgColor='#FFFFFF'" align="left" valign="center">How about Red.</label> </td>
</tr><tr>
<td id= "ignore" onmousedown="bgColor='yellow'" onClick="window.location='page4.html'" style="cursor:hand" onmouseup="bgColor='#FFFFFF'" align="left" valign="center">This will be Yellow.</label> </td>
</tr>
</table>