0

您好，我正在使用一个简单的代码在鼠标悬停时更改图片；

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

我无法解决这个问题，你能帮帮我吗？

4

3 回答 3

1

您需要区分名称，或者更好的是，使用 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>
于 2012-11-02T20:50:11.520 回答
1

做这个：

<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>
于 2012-11-02T20:53:04.113 回答
1

首先，欢迎来到未来！你在辐射避难所过得怎么样？对世界没有在 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;
}
于 2012-11-02T21:05:41.430 回答