onmouseover highlighting all links with same text for anchor

[u01jmg3]

hi, im looking to use javascript for highlighting other links that use the same anchor text so when a user "hovers" over one of them the others are highlighted. (the reason i have multiple links that point to the same animal is because they are from a tag cloud that shows animals which have recently had their info in a database changed thus the same animal can appear more than once.)

e.g.
<a href="search.php?animal=1" id="link1">animal1</a>
<a href="search.php?animal=2" id="link2">animal2</a>
<a href="search.php?animal=1" id="link3">animal1</a>
<a href="search.php?animal=3" id="link4">animal3</a>

Hovering over link1 would also highlight link3 and vice versa. Don't hesistate to ask questions about my scenario if i havent explained well enough. Ive been scratching my head on this for the past 4hrs - Ive tried putting <span></span> with document.getElementById("link3").style.backgroundColor("red"); around the anchor tag for link1 in hope that hovering over link1 would highlight link3 but to no avail. Any help would be much appreciated. Thanks.

 

[u01jmg3]

<bump>

Nobody got any ideas? Surely if you can change the background color of a link using span:

<span onmouseover="this.style.backgroundColor = 'yellow';"><a href"#">test</a></span>

Then you can do something by changing the "this" to point to the span id of another anchor via document.getElementById(spanid)? I don't know JavaScript well enough to know how to do this but php would be useless on this occasion!

I also noticed whilst experimenting that if 2 or more links have the same spanid then changes such as changing the background color will only apply to the first link with the spanid you are looking for. I guess the spanid must be unique?

I found this thread

http://www.webmasterworld.com/forum91/730.htm

(see post#1491009) but am struggling to get it to what I need it to do. Thanks.

 

[tsuji]

Basically like this.
[tt]
<script language="javascript">
function x_over(obj) {
var shref=obj.href;
var celem=document.getElementsByTagName("a");
for (var i=0;i<celem.length;i++) {
if (celem.href && celem.href==shref) {
celem.style.backgroundColor="yellow";
}
}
}
function x_out(obj) {
var shref=obj.href;
var celem=document.getElementsByTagName("a");
for (var i=0;i<celem.length;i++) {
if (celem.href && celem.href==shref) {
celem.style.backgroundColor="white";
}
}
}
</script>

<a href="search.php?animal=1" id="link1" onmouseover="x_over(this)" onmouseout="x_out(this)">animal1</a>
<a href="search.php?animal=2" id="link2" onmouseover="x_over(this)" onmouseout="x_out(this)">animal2</a>
<a href="search.php?animal=1" id="link3" onmouseover="x_over(this)" onmouseout="x_out(this)">animal1</a>
<a href="search.php?animal=3" id="link4" onmouseover="x_over(this)" onmouseout="x_out(this)">animal3</a>
[/tt]