Question

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

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

在JS版本中，图像是从images文件夹中调用的。与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>

任何建议都将不胜感激。这必须是如此简单，我只是不明白为什么它不起作用。我本可以发誓我正确地做到了这一点......

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

Answer 2

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

链接JS翻转图像

2 个答案: