在鼠标悬停时更改页面不同部分的 link 和图像

Question

有人可以帮我解决这个问题吗？我主要是自学成才，老实说我不知道我到底在做什么。

我试图让 onmouseover 事件在将鼠标悬停在第一部分上时更改页面上的不同图像...但同时更改已更改图像的 URL。我发现了一些关于更改图像的有价值的信息，但没有找到图像更改时也会更改 URL 的信息。

具体来说，我正在尝试更改显示的图像和鼠标悬停时 "invite_r2_c1" 的 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>

Answer 1

要为你整理一下。首先，创建一个名为 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 做同样的事情，在这种情况下你只需要后者。

为要更改的 link 添加一个 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;
}

在鼠标悬停时更改页面不同部分的 link 和图像

Changing both link and image for a different part of the page onmouseover

javascript

html

image

url

onmouseover