-1

似乎使用 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" width="1400" height="1050" 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”右侧的方块。因此，唯一不起作用的是在我上面提到的演示页面上运行良好的翻转“突出显示”。

我确信这是我所缺少的一些简单的东西，但我已经检查了好几次，在我的代码中找不到缺陷。我将不胜感激任何建议和帮助。谢谢。

4

1 回答 1

0

像这样的东西：

<img src="https://www.sanjuantitle.com/township-range-test.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_parent" alt="here's google" title="here's google" href="google.com" coords="126,135,325,333" shape="rect">
    <area target="_parent" alt="here's more google" title="here's more google" href="google.com" coords="324,338,503,522" shape="rect">
    <area target="_parent" alt="here's stackoverflow" title="here's stackoverflow" href="stackoverflow.com" coords="89,867,506,529,680,856,884,524,1050,868,1109,518,1070,954,1127,1004" shape="poly">
    <area target="_parent" alt="yahoo?" title="yahoo?" href="yahoo.com" coords="809,236,344" shape="circle">
</map>
于 2018-10-25T16:10:08.583 回答