highlight unhighlight link background?

[say]

Hi, I'm trying to create link that when a user clicks it, it will highlight the link with a bgcolor of blue, while when the user clicks on another link, the previous link will unhighlight and highlight the new link which was clicked.

What I've been trying had got me into 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.

[MikeFoster]

Here's an idea...

When highlight() is called it should assign a reference to the highlighted element to a global variable. When undohighlight() is called it will use the global variable to know which element to unhighlight.

[say]

Thanks for the reply Mike! I've no knowledge in javascript totally, can you show me some example? Thanks and thanks.

[MikeFoster]

There are many different ways, but you are very close. Taking your code and making minimal changes...

<script type='text/javascript'>

var activeEle = null;

function highlight( ) 
{ 
    if (activeEle) {
      activeEle.style.color = '#000';
      activeEle.style.background = 'transparent';
    }
    var oObj = event.srcElement; 
    oObj.style.color = "#FFFFFF"; 
    oObj.style.background = "#000066"; 
    activeEle = oObj;
} 

</script>

[say]

WOW, what can I say. I've been dealing with this and searching high and low for explaination on this for approx 3 days and here, Mike save me with the final answer with one neat function! Thanks a million Mike! You're truly the man and I'll support Cross-Browser.com on my signature! Thanks again!

[MikeFoster]

Thanks very much, say!

We do like to play with javascript here

[say]

Hi Mike, sorry to trouble you again. May I know how to reference the selected link? I have place an id on each link as:

 <td width="1%"><img src="http://localhost/folder.gif" /></td>
<td width="99%"><a id="9" onClick="highlight( );">link 1</a></td> 
<td width="1%"><img src="http://localhost/folder.gif" /></td>
<td width="99%"><a id="10" onClick="highlight( );">link 2</a></td>

and I tried a loop on this to get the highlighted link:

var ele = document.getElementsByTagName("a");

for( var i=0; i<ele.length; i++ )
{
    if( activeEle )
   {
        document.write(ele.item(i).id);
        break;
    }
}

Is giving me the same 9 id everytime despite I choose link 2. I tried reading getElementsBySelector(), but no idea how to use it to reference the style in any way. Hope you can give some pointers here. Thanks.

[say]

After playing around, I got it!

var ele = document.getElementsByTagName("a");

	for( var i=0; i<ele.length; i++ )
	{
		if( ele.item(i).style.background == "#000066" )
    	{
			document.write(ele.item(i).id);
			break;
		}
	}