链接 JS 翻转图像

发布于 2024-10-22 23:02:16 字数 814 浏览 3 评论 0原文

我一直在尝试创建一个简单的翻转图像，并且我已经使用 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>

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

原文

I have been trying to create a simple rollover image, and I have done so with CSS and JavaScript methods. However, I cannot get this image to link.

In the CSS version (as viewed below), I was using background images, and the link was not recognized in the "empty" HTML block.

In the JS version, the images are being called from the images folder. Like the CSS, the link is not recognized in the "empty" HTML block. The moment I put an image in the HTML block, my rollover stops working.

I currently have the following in my HTML code. The rollovers work, but the link does not:

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

In this example, the link works, but the rollovers do not:

<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>

Any suggestions would be greatly appreciated. This has got to be something so simple, and I just don't understand why it's not working. I could have sworn I was doing this correctly...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ι不睡觉的鱼゛ 2024-10-29 23:02:16

尝试使用这个：

<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

Try to use this:

<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>

Remember that id needs to be unique per page, so if you have multiple images they need different ids

回复收藏 0 原文