3

我试图弄清楚如何使用 MapHilight 但运气不佳。唯一的“文档”似乎只是一些工作示例。这可能是因为托管插件的站点似乎已关闭。我昨天也刚刚学习了 JQuery，所以我不知道这是否阻碍了我的进步。我想做的是逐个区域地指定我的图像地图突出显示的外观。David Lynch 的简单演示展示了这一点，但我不确定它是如何工作的。我不明白为什么他使用图像具有包含 div 的背景以及画布的用途。这是我到目前为止所拥有的：

...
    <script type="text/javascript">
        $(function () {
            $('#ImageMap1').maphilight();
        });
    </script>
</head>
...

<div style="float: left">
    <img id="ImageMap1" src="solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Jupiter" coords="222,186,28" shape="circle"/>
        <area alt="" title="" href="#Earth" coords="135,194,13" shape="circle"
            data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'ff0000','fillOpacity':0.6}"/>
    </map>
</div>

我猜，这给了我一条红色实线的默认突出显示。未使用 data-maphilight 元数据。对如何使这项工作进行解释会很棒，但是将我引导到解释如何整体使用 maphilight 的资源会更好，因为我最终想使用此演示中的几乎所有内容。

4

3 回答 3

6

我看到您决定切换到 Silverlight，但由于我现在正在摆弄 maphighlight，所以我决定看看这个。问题是您发布的示例在切换“与”后工作正常，反之亦然。 

<div style="float: left">
    <img id="ImageMap1" src="http://geographyandhistory.wikispaces.com/file/view/solar_system.jpg/43347125/283x202/solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Earth" coords="228,151,53" shape="circle" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"00ff00","fillOpacity":0.6}'/>
        <area alt="" title="" href="#Sun" coords="68,54,44" shape="circle" data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'00ff00','fillOpacity':0.6}"/>
    </map>
</div>​

这是一个小提琴 - http://jsfiddle.net/k67gq/6/ 查看“地球”和“太阳”区域如何具有相同的“数据地图”属性，但引号除外。

于 2012-11-26T20:10:03.920 回答
1

而不是“或”，在data-maphilight中使用“对我有用。例如：data-maphilight="{"strokeColor":"0000ff",...

于 2014-11-20T11:08:41.553 回答
0

我想没有什么可用的。奇怪的是，当我在搜索如何进行自定义高亮显示时看到这么多对这个插件的引用。我最终不得不使用 Silverlight。

于 2012-10-03T17:01:22.373 回答