使用JQuery懸停與HTML圖像映射

Question

我有一個復雜的背景圖像，有很多小區域需要翻轉圖高亮，以及每個區域的附加文本顯示和相關鏈接。 最后的插圖使用z-index堆疊了幾個具有透明度的靜態圖像，並且高亮翻轉插圖需要在中間的“三明治”層之一中顯示以實現期望的效果。

在一些不成功的擺弄塊后，我決定這可能是用舊式的圖像映射完成的。 我制作了一個帶有四個幾何形狀輪廓的示意性測試圖，並使用png翻轉“填充”它們。 我們的想法是將圖像映射與底部背景圖層相關聯，使用css {visibility：hidden}初始化所有翻轉，並使用Jquery的懸停方法使它們可見，並在單獨的div中顯示相關文本。 單獨的文本函數是我沒有嘗試使用：hover pseudoclass而不是jQuery hover的原因。 因為我正在使用圖像映射，所以我將所有翻轉png（具有透明背景）的大小設置為整個容器以進行精確放置，因此所有內容都精確排列。

我得到了什么......不是真的！ 正確映射圖像映射以僅激活幾何區域。 但是每個翻轉區域的href只是間歇性地工作，並且使用帶有css可見性的Jquery懸停是混亂的。 期望的行為是滾入該區域只會使形狀變得堅固。 實際發生的是，形狀內的任何運動都可以在可見和隱藏之間快速切換; 當光標在形狀內停止時，它可能是可見的，也可能不是。 任何想法贊賞！

樣本懸停設置（我最終會使用數組進行實際翻轉，相關鏈接和文本）：

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

圖像地圖：

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

你應該看看這個插件：

https://github.com/kemayo/maphilight

和演示：

http://davidlynch.org/js/maphilight/docs/demo_usa.html

如果有的話，你可以從中借用一些代碼來修復你的代碼。

Answer 2

這個問題已經很久了，但我想補充一個當時不存在的已接受答案的替代方案。

Image Mapster是一個jQuery插件，我寫這個插件是為了解決Map Hilight的一些缺點（它最初是該插件的擴展，盡管它幾乎已被完全重寫）。 最初，這只是維護區域選擇狀態的能力，修復瀏覽器兼容性問題。 自幾個月前首次發布以來，我添加了許多功能，包括使用備用圖像作為高光源的功能。

它還能夠將區域識別為“掩模”，這意味着您可以創建具有“洞”的區域，並另外創建復雜的區域分組。 例如，區域A可能導致另一個區域B被突出顯示，但區域B本身不會響應鼠標事件。

網站上有一些示例顯示了大部分功能。 github存儲庫還有更多示例和完整的文檔。

Answer 3

我發現了我過去使用的這個精彩的映射腳本（ mapper.js ）。 它的不同之處在於您可以將鼠標懸停在地圖上或頁面上的鏈接上以突出顯示地圖區域。 可悲的是，它是用javascript編寫的，需要HTML中的大量內聯編碼 - 我很樂意看到這個腳本移植到jQuery：P

另外，查看所有演示！ 我認為這個例子幾乎可以變成一個簡單的在線游戲（不使用閃光燈） - 確保你點擊不同的攝像機角度。

Answer 4

盡管jQuery Maphilight插件可以完成這項任務，但它依賴於html中過時的詳細圖像映射。 我寧願讓地圖坐標外部。 這可以作為JS與jquery imagemap插件，但它缺乏懸停狀態。 一個很好的解決方案是使用flash和JS中的googles geomap可視化。 但是這種vectordata的開源未來是svg，考慮到svg支持所有現代瀏覽器，谷歌svgweb用於IE的flash轉換，為什么不是一個jquery插件來添加鏈接和hoverstates到svg地圖，如JS演示在這 ？ 這樣，您還可以避免將矢量圖轉換為imagemap坐標的復雜步驟。