javascript - 使用 javascript 图像上的可点击点

标签 javascript jquery html css

我有这样一张图片:

enter image description here

我想让每个点都可以通过不同的 URL 单击,而且我想在鼠标悬停在一个点上时实现一个弹出文本。

我如何使用 javascript 和 css 做到这一点?有图书馆吗?

最佳答案

您可以通过在线 map 工具为您的图像做到这一点。

我试图从 this 映射您的图像关联。

您可以看到我在几个点上创建了一个可点击的链接,并将自定义文本设置为悬停时显示文本的标题。

希望对您有所帮助。谢谢。

<img id="Image-Maps-Com-image-maps-2017-04-25-084654" src="/image/FbxJg.png" border="0" width="286" height="322" orgWidth="286" orgHeight="322" usemap="#image-maps-2017-04-25-084654" alt="" />
<map name="image-maps-2017-04-25-084654" id="ImageMapsCom-image-maps-2017-04-25-084654">
<area  alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="228,156,255,181" style="outline:none;" target="_self"     />
<area  alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="129,173,156,198" style="outline:none;" target="_self"     />
<area shape="rect" coords="284,320,286,322" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

关于javascript - 使用 javascript 图像上的可点击点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43611009/

相关文章:

javascript - 是否可以在自己的模板中再次使用指令?

javascript - JS : get runtime 'this' from outside function

javascript - Jquery .css 和动态生成的图像?

html - 可变高度的 parent (基于第一个 child )和全高的第二个 child

jquery - 条形图插件 - 使每个条形图都可点击(每个条形图都有不同的链接)

javascript - jQuery:在同一个网站上运行 2 个不同的 jQuery 版本?

javascript - 无法在 Atom 编辑器上运行 Javascript 代码

javascript - jquery 菜单滑动和更改按钮文本

javascript - Jquery 自动完成与响应,作为过滤功能

html - Bootstrap Modal Dropdown 隐藏在 Modal 后面