在onmouseover上更改页面不同部分的链接和图像
在onmouseover上更改页面不同部分的链接和图像
提问于 2016-02-02 23:47:42
有人能帮我弄清楚吗？我大多是自学的，老实说，我根本不知道自己到底在做什么。
我试图让onmouseover事件在第一个part...but上悬停时更改页面上的不同图像，同时也更改更改图像的URL。我已经找到了一些关于更改图像的有价值的信息，但是当图像发生变化时，哪些信息也会改变URL。
具体来说，我试图更改显示的图像和"invite_r2_c1“onmouseover的url。我漏掉了什么(确切地说，在哪里)？现在的代码工作正常，但实际上并没有改变任何url链接。
我可能已经做了一些非常反向的事情，但这是我正在使用的代码：
<tr>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_01.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" ><img name="invite_r1_c2" src="images/invite_r1_c2.gif" width="105" height="644" id="invite_r1_c2" alt=""></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_02.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" ><img name="invite_r1_c3" src="images/invite_r1_c3.gif" width="99" height="644" id="invite_r1_c3" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_03.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" ><img name="invite_r1_c4" src="images/invite_r1_c4.gif" width="102" height="644" id="invite_r1_c4" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_04.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" ><img name="invite_r1_c5" src="images/invite_r1_c5.gif" width="100" height="644" id="invite_r1_c5" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_05.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" ><img name="invite_r1_c6" src="images/invite_r1_c6.gif" width="101" height="644" id="invite_r1_c6" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c7" src="images/invite_r1_c7.gif" width="274" height="644" id="invite_r1_c7" alt="" /></span></td>
<td><img src="images/spacer.gif" width="1" height="644" alt="" /></td>
</tr>
<tr>
<td colspan="7"><a href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="406" alt="" /></td>
</tr>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-03 00:11:57
帮你整理一下东西。首先，创建一个名为changeImageAndURL()的可重用函数，这样就可以获得可重用的东西，而不是总是将原始js转储到HTML中。
对于HTML部分，将所有悬停图像更改为如下所示：
//I'm not going to repeat every image here, just giving you example for one
<td><span onmouseover="changeImageAndURL('images/invite_r2_c1_00b.jpg','link2.html')"><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>我删除了ommouseout和onclick事件，因为它们似乎与onmouseover一样，在这种情况下，您只需要使用后者。
向要更改的链接添加一个id：
<td colspan="7"><a id="invite_r2_c1_link" href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>现在在你的JS部分：
function changeImageAndURL(img, link) {
document.getElementById('invite_r2_c1').src = img;
document.getElementById('invite_r2_c1_link').href = link;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35166008
复制相关文章
相似问题
腾讯云开发者
