链接一个 JS 翻转图像答案

【问题标题】：Link a JS rollover image链接一个 JS 翻转图像
【发布时间】：2011-03-18 22:36:48
【问题描述】：

我一直在尝试创建一个简单的翻转图像，并且我已经使用 CSS 和 JavaScript 方法做到了。但是，我无法链接此图像。

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

在 JS 版本中，图像是从图像文件夹中调用的。与 CSS 一样，在“空”HTML 块中无法识别该链接。我将图像放入 HTML 块的那一刻，我的翻转停止工作。

我目前的 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>

任何建议将不胜感激。这一定很简单，我只是不明白为什么它不起作用。我可以发誓我这样做是正确的......

【问题讨论】：

标签： javascript html css image rollovers

【解决方案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

【讨论】：

不同的ID或相同的类:)
@Kyle：如果图像都相同，那么是的，相同的类，如果它们是唯一的，那么使用一个类将需要一定程度的抽象，我想这超出了这个问题的范围来自 OP 的初始代码

【解决方案2】：

我刚刚想通了。事实证明，除了我在 CSS 中引用的图像之外，我还必须为 <span> 标记提供具有宽度和高度的 display: block。我知道这很简单……谢谢大家的帮助。

【讨论】：

如果它是最好的，可以接受你自己的答案。如果其他答案有帮助，您可以点赞。