javascript - 链接 JS 翻转图像

Question

我一直在尝试创建一个简单的翻转图像，我已经使用 CSS 和 JavaScript 方法完成了。但是，我无法链接这张图片。

在 CSS 版本中(如下所示)，我使用的是背景图片，并且在“空”HTML block 中无法识别链接。

在 JS 版本中，图像是从图像文件夹中调用的。与 CSS 一样，链接在“空”HTML block 中无法识别。当我将图像放入 HTML block 时，我的滚动停止工作。

目前我的 HTML 代码中有以下内容。翻转有效，但链接无效:

<div class="quick-map"><a href="Services/FloorPlan.aspx" onclick="window.open(this.href);return false;">&nbsp;</a></div>

在此示例中，链接有效，但翻转无效:

<div class="quick-map"><a href="Services/FloorPlan.aspx" onmouseover="document.MyImage.src='images/quick-map.png';" onmouseout="document.MyImage.src='images/quick-map-over.png';"><img alt="" src="images/quick-map.png" /></a></div>

如有任何建议，我们将不胜感激。这必须非常简单，我只是不明白为什么它不起作用。我可以发誓我这样做是正确的......

Answer 1

尝试使用这个:

<div class="quick-map">
 <a href="Services/FloorPlan.aspx" onmouseover="document.getElementById('MyImage').src='images/quick-map.png';" onmouseout="document.getElementById('MyImage').src='images/quick-map-over.png';">
  <img alt="" src="images/quick-map.png" id="MyImage" />
 </a>
</div>

请记住，每个页面的 id 必须是唯一的，因此如果您有多张图片，它们需要不同的 id