2 “onmouseover” break the working of page

Question

Hello I'm using a simple code for picture changing on mouse over with;

<A href="http://www.x.com" onmouseover="document.Same_size_LINK.src='rist.jpg'" onmouseout="document.Same_size_LINK.src='ist.jpg'">
<IMG SRC="ist.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=85 BORDER=0 >

</A>

code. It works perfect but when I try to use two of those code, they both are not working.

<A href="http://www.x.com" onmouseover="document.Same_size_LINK.src='r.jpg'" onmouseout="document.Same_size_LINK.src='d.jpg'">
<IMG SRC="d.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=105 BORDER=0 >

</A><br><br>

<A href="http://www.y.com" onmouseover="document.Same_size_LINK.src='rist.jpg'" onmouseout="document.Same_size_LINK.src='ist.jpg'">
<IMG SRC="ist.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=85 BORDER=0 >

</A>

I couldn't solve this problem, can you help me?

Answer 1

You need distinguish the names, or better, use document.getElementById and add unique ids to the images

<A href="http://www.x.com" onmouseover="document.getElementById('Same_size_LINK-1').src='r.jpg'" onmouseout="document.getElementById('Same_size_LINK-1').src='d.jpg'">
<IMG SRC="d.jpg" id="Same_size_LINK-1" WIDTH=296 HEIGHT=105 BORDER=0 >
</A><br><br>

<A href="http://www.y.com" onmouseover="document.document.getElementById('Same_size_LINK-2').src='rist.jpg'" onmouseout="document.getElementById('Same_size_LINK-2').src='ist.jpg'">
<IMG SRC="ist.jpg" id="Same_size_LINK-2" WIDTH=296 HEIGHT=85 BORDER=0 >

</A>

Answer 2

Do this:

<a href="http://www.x.com" 
   onmouseover="document.Same_size_LINK_1.src='r.jpg'"
   onmouseout="document.Same_size_LINK_1.src='d.jpg'">
<img src="d.jpg" name="Same_size_LINK_1" width="296" 
   height="105" border="0" />
</a>

<br /><br />

<a href="http://www.y.com" 
   onmouseover="document.Same_size_LINK_2.src='rist.jpg'"
   onmouseout="document.Same_size_LINK_2.src='ist.jpg'">
<img src="ist.jpg" name="Same_size_LINK_2" width="296" 
   height="105" border="0" />
</a>

Answer 3

First off, welcome to THE FUTURE! How was your stay in the fallout shelter? Disappointed that the world didn't end in '99?

Second, javascript isn't necessary for this. You can do it like this: http://jsfiddle.net/Shmiddty/Eg6wV/

HTML:

<a href="http://www.x.com" class="image-button" id="button-x"/>
<a href="http://www.y.com" class="image-button" id="button-y"/>​

CSS:

.image-button{
    display:block;
    width:296px;

}
#button-x{
    height:105px;
    margin-bottom:1em;
    background:url(http://placehold.it/296x105/) no-repeat;
}
#button-x:hover{
    background:url(http://placekitten.com/296/105) no-repeat;
}
#button-y{
    height:85px;
    background:url(http://placehold.it/296x85/) no-repeat;
}
#button-y:hover{
    background:url(http://placekitten.com/296/85) no-repeat;
}