CODEWITHSUNDEEP
javascripthtml
Slavez
Slavez

Reputation: 239

2 "onmouseover" break the working of page

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?

Upvotes: 0

Views: 89

Answers (3)

tgormtx
tgormtx

Reputation: 322

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>

Upvotes: 1

Shmiddty
Shmiddty

Reputation: 13967

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;
}

Upvotes: 1

BryanH
BryanH

Reputation: 6062

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>

Upvotes: 1

Related Questions