需要具有多个翻转热点的图像映射的最佳答案
Posted
技术标签:
【中文标题】需要具有多个翻转热点的图像映射的最佳答案【英文标题】：Need Best Answer for Image Map with Multiple Rollover Hotspots 【发布时间】：2019-03-30 06:55:12 【问题描述】：似乎使用 jquery.js 和 jquery.maphilight.js 将是我的翻转地图项目的最佳解决方案，但我似乎无法使其工作。我正在尝试遵循此处发布的非常基本的示例：https://davidlynch.org/projects/maphilight/docs/“Demos”下的“Simple Demo”准确地显示了我想要做的事情，我认为我完全按照代码来尝试和复制。这是我正在使用的：
<!DOCTYPE html>
<html>
<head>
<style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">
$(document).ready(function ()
$('.map').maphilight();
);
</script>
</style>
</head>
<body padding="0" margin="0">
<img class="map" src="township-range-test.jpg" usemap="#countymap">
<map name="countymap">
<area shape="rect" coords="329,530,504,714" title="29-13" href="javascript:alert('Navigate to ITORIAN');" data-maphilight='"fillColor":"0000ff","fillOpacity":0.3'>
<area shape="rect" coords="504,530,692,714" title="29-12" href="javascript:alert('Navigate to GOOGLE');">
</map>
</body>
</html>
我的 jquery.js 和 jquery.maphilight.js 脚本的副本与我的测试网页位于同一目录中：
https://www.sanjuantitle.com/sj-county-map-java.html
如果您将鼠标悬停在“29N-13W”方块上，则链接可以正常工作，并且该链接也适用于“29N-12W”右侧的方块。所以唯一不起作用的是在我上面提到的演示页面上工作得很好的翻转“突出显示”。
我确定这是我缺少的一些简单的东西，但我已经检查了好几次，但找不到我的代码中的缺陷。我将不胜感激任何建议和帮助。谢谢。
【问题讨论】：
图像....地图？我从浴室回来的路上是不是通过了某种时间传送门？ 试试这个image-map.net 【参考方案1】：类似这样的：
<img src="https://www.sanjuantitle.com/township-range-test.jpg" usemap="#image-map">
<map name="image-map">
<area target="_parent" title="here's google" href="google.com" coords="126,135,325,333" shape="rect">
<area target="_parent" title="here's more google" href="google.com" coords="324,338,503,522" shape="rect">
<area target="_parent" title="here's ***" href="***.com" coords="89,867,506,529,680,856,884,524,1050,868,1109,518,1070,954,1127,1004" shape="poly">
<area target="_parent" title="yahoo?" href="yahoo.com" coords="809,236,344" shape="circle">
</map>
【讨论】：
我意识到这不能满足您问题的“悬停”部分。为此，您确实需要一个 javascript 解决方案。看看这个帖子：***.com/questions/12661124/…以上是关于需要具有多个翻转热点的图像映射的最佳答案的主要内容，如果未能解决你的问题，请参考以下文章