使用MapHilight Jquery插件來突出顯示不同的顏色

我想弄清楚如何使用MapHilight但沒有太多的運氣。它上面唯一的「文檔」似乎只是一些實例。這可能是因爲託管該插件的網站似乎已關閉。我昨天也剛剛學過JQuery，所以我不知道這是否阻礙了我的進步。我想要做的是在區域範圍內指定我的圖像映射的外觀和風格。大衛林奇的Simple Demo顯示這一點，但我不知道它是如何工作的。我不明白爲什麼他使用的圖像具有包含div的背景以及畫布的用途。這是我到目前爲止：使用MapHilight Jquery插件來突出顯示不同的顏色

... 
    <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元數據沒有被使用。解釋如何使這項工作會很好，但指導我解釋如何使用maphilight整體的資源會更好，因爲我最終想要利用this demo中的幾乎所有東西。

來源

2012-05-25 xr280xr

我看到你決定切換到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/ 看就怎麼‘地球’和‘陽光’方面具有相同的’數據 - maphilight'屬性除引號外

來源

2012-11-26 20:10:03 nnikolov06

感謝發佈。這很有趣。你知道它爲什麼重要嗎？我認爲「和」在JavaScript中是可以互換的。那麼你是否基本上必須逆向工程演示和maphilight插件才能使用該插件？ – xr280xr

我剛剛通過jQuery核心風格指南 - [docs.jquery.com]（http://docs.jquery.com/JQuery_Core_Style_Guidelines）。請注意文檔結尾處字符串用法的註釋：STRINGS字符串應始終使用雙引號而不是單引號。我想這可能是手頭的問題。 – nnikolov06

看看這個問題 - [包含json的數據屬性中的單引號]（http://stackoverflow.com/questions/5168268/single-quotes-in-data-attribute-containing-json）。 – nnikolov06

我想沒什麼可用的。奇怪，當我在搜索如何做自定義高亮時看到這麼多的插件引用。我最終不得不使用Silverlight。

來源

2012-10-03 17:01:22 xr280xr

現在好了，你可以切換回maphilight即可;）這將節省您不必強制所有的用戶不必安裝Silverlight。 –

而不是「或」，使用&「在數據maphilight爲我工作。例如：數據maphilight =「{& QUOT;則strokeColor & QUOT;：& QUOT; 0000FF & QUOT; ...

來源

2014-11-20 11:08:41

使用MapHilight Jquery插件來突出顯示不同的顏色

回答

相關問題