ImageMapster與多個圖像和地圖

是否有可能使用ImageMapster與多個圖像和地圖？ImageMapster與多個圖像和地圖

在我的方案中，有多個圖像。每張圖片都有自己獨特的地圖，每次只顯示一張圖片。當單擊一個圖像的一部分時，它將更改爲另一個圖像，並使用不同的地圖。我通過直接更改元素的「src」和「useMap」值來做到這一點。不過，ImageMapster只能在第一張圖片上工作，其餘的圖片不會突出顯示。我試圖在更改圖像/地圖之前和之後解綁並重新綁定ImageMapster，但這並沒有幫助。

我該如何使ImageMapster工作？

來源

2013-12-18 Kale Muscarella

也許我可以幫助，如果你可以顯示你的嘗試解除綁定？ –

如果你製作了一個[jsFiddle]（http://jsfiddle.net/Bu6f4/），那麼這將會容易得多 - '帶着這個帶有imagemapster插件的空殼加載，編輯並點擊UPDATE，然後發佈新的URL 「如果我們能夠清楚地看到你在做什麼以及你是如何做的，光就可能突然出現。（當我建立一個jsFiddle來讓別人來幫助我時，我經常會發現解決方案對我自己的問題。） – gibberish

是的，您可以使用imagemapster圖像映射有多個圖像，但是如果您嘗試更改動態DOM元素，我懷疑您會有一個非常粗糙的操作。

回想一下jQuery如何與注入元素和存在於DOM創建的元素之間的區別。對於注入的元素，jQuery必須使用.on()方法來捕獲它們的事件，是的？那麼，當你改變DOM元素時，你可以在DOM中刪除/重新注入它們。因此，插件（已初始化爲上一個元素）現在必須初始化爲新注入的元素，並且必須能夠使用.on()策略來操作該新元素。這是從插件問很多。

但是，一切都不會丟失。

jsFiddle demo

以上的jsfiddle是一個工作示例，從兩個開發者自己的例子，那就說明你在你的問題描述了一個粗略的估計拼湊起來的。兩個圖像地圖在同一頁面上，但其中一個最初隱藏（我只使用兩個圖像/圖像地圖，但可能有幾個最初隱藏，而不僅僅是一個）。

點擊第一個圖像映射時，在imagemapster的onClick回調中，我隱藏包含該圖像的div並取消隱藏下一個圖像div。這真的是這麼簡單：

var image = $('#vegetables'); 
image.mapster(
{ 
    fillOpacity: 0.4, 
    onClick: function (e) { 
     var newToolTip = defaultDipTooltip; 
     $('#statemapDIV').show(); <==================== 
     $('#veggieDIV').hide(); <==================== 
    }, 
    toolTipClose: ["tooltip-click", "area-click"], 
    areas: [ 
     { 
      key: "dip", 
      toolTip: defaultDipTooltip 
     }, 
     { 
      key: "asparagus", 
      strokeColor: "FFFFFF" 
     } 
     ] 
});

我希望這個解決方案能爲你工作。

來源

2013-12-30 22:26:37 gibberish

你有多少個不同的圖像（和圖像地圖）？

除非他們對很多人，否則我會將所有圖像和圖像地圖預加載到不同的DIV中，並且隱藏除第一個以外的所有圖像和圖像。然後，您可以使用.hide（）和.show（）來隱藏包含當前圖像的DIV，並用想要顯示的圖像顯示DIV。這樣每個圖像都可以擁有自己的圖像映射，而不需要動態改變DOM。

雖然有一個警告：我已經在隱藏的DIV中的圖像上激活imagemapster的問題。在IE8中，當顯示DIV時，如果在DIV隱藏時在圖像上激活了imagemapster，則圖像保持不可見狀態。也許這是由於我的情況特定的一些情況，但如果IE8功能對您很重要，我建議您在完全採用此解決方案之前進行一些測試。

來源

2014-01-28 08:02:37 madcap

哦，我想我必須學會在我寫出自己的答案之前更好地閱讀他人的答案。到現在爲止，我現在意識到我的答案或多或少是@gibberish答案的副本。對不起。我的警告仍然適用。 – madcap

ImageMapster與多個圖像和地圖

回答

相關問題