Question

我正在试图弄清楚如何使用MapHilight，但没有太多运气。它上面唯一的“文档”似乎只是一些有用的例子。这可能是因为托管该插件的网站似乎已关闭。我昨天刚刚学习了JQuery，所以我不知道这是否阻碍了我的进步。我想要做的是在逐个区域的基础上指定我的图像地图的外观和感觉。 David Lynch的Simple Demo显示了这一点，但我不确定它是如何工作的。我不明白他为什么使用图像具有包含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>

这让我猜测，默认突出显示红色实线。未使用数据宏观元数据。关于如何使这个工作的解释会很棒，但是指导我一个解释如何整体使用maphilight的资源会更好，因为我最终想要在this demo中使用几乎所有东西。

Answer 1

我看到你决定改用Silverlight但是因为我现在正在摆弄maphighlight，所以我决定看看这个。问题是你发布的样本在切换“with”后工作正常，反之亦然。

<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/ 了解“地球”和“太阳”区域除了引号之外具有相同的“数据宏”属性。

Answer 2

我猜没有什么可用的。当我在搜索如何进行自定义hilighting时看到这么多引用这个插件时很奇怪。我最终不得不使用Silverlight。

Answer 3

而不是“或”，在数据中使用＆amp; quot; maphilight为我工作。例如：data-maphilight =“{＆amp; quot; strokeColor＆amp; quot;：＆amp; quot; 0000ff＆amp; quot;，...

使用MapHilight Jquery插件以不同颜色突出显示

3 个答案: