[英]2 “onmouseover” break the working of page
您好,我使用一個簡單的代碼在鼠標懸停時更改圖片;
<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>
碼。 它工作完美,但是當我嘗試使用其中兩個代碼時,它們都無法正常工作。
<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>
我無法解決此問題,您能幫我嗎?
您需要區分名稱,或者更好地使用document.getElementById並向圖像添加唯一的ID
<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>
做這個:
<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>
首先,歡迎來到未來! 您如何留在防輻射庇護所中? 失望的世界並沒有在99年末終結?
其次,不需要javascript。 您可以這樣操作: 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.