带有特定点链接的图像

Posted 2023-05-09

【中文标题】带有特定点链接的图像

【英文标题】：Image with a link in a specific point

【发布时间】：2017-01-28 19:21:38

【问题描述】：

我需要创建一个具有这种功能的网站：

我有一张图片（比如公园区域），所以我必须在这张图片的不同点创建一个 div，它会产生悬停效果并显示一个带有图片（或者可能是指向它的链接）的文本框。

我的主要疑问是我不知道如何获取此图像的某些点来创建具有此悬停效果的 div。

【问题讨论】：

为什么不使用图像映射？大量免费的在线图像地图制作工具可让您定义单个图像的部分以具有不同的 URL 和在悬停时弹出的标题文本。语法就像.. <area shape=rect coords="0,0,175,240" href="index.html" title="will display on the mouse over of the link area" ...

@DuaneLortie 我不能使用它，因为我会有不同的图像，这些图像与街道、城市等无关。我必须“映射”或“标记”这个悬停在以 3D 形式表示工作站的图像

? Imagemap 与街道或城市无关，它是一种拍摄任何事物的单一图像并使不同部分可点击以指向不同 URL 的方式

【参考方案1】：

请检查以下网址。希望这可能会有所帮助

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

http://www.howtocreate.co.uk/tutorials/html/imagemaps

http://www.outsharked.com/imagemapster/

【讨论】：

是的，您可以使用“HTML 映射”添加任何内容:)

谢谢！帮了大忙！

【参考方案2】：

您可以使用 jQuery。请先看看这个link。您可以在图像上获取鼠标 x 和 y 位置。然后在 x 和 y 位置，你可以做你想做的事。

【讨论】：

太棒了！它工作得很好，但是我如何在 x 和 y 轴的每个部分之间标记一个“限制”，使其像一个正方形的坐标，这样它就会得到这个范围？