html圖像映射+ jquery maphilight - 突出顯示匹配數組中值的所有區域ID

我有一個簡單的html圖像映射和一個簡單的狀態名稱數組，我希望數組中的所有狀態都在html圖像中突出顯示地圖。這是我最初的代碼，所有我試圖獲得引用HTML圖像地圖的區域ID已成功：html圖像映射+ jquery maphilight - 突出顯示匹配數組中值的所有區域ID

<div id="mapchart"> 

    <img src ="C:\Users\userA\Desktop\folder\usmap.png" border="0" alt="US Map" usemap ="#usmap" class="maphilight" /> 
    <map name="usmap"> 
    <area shape ="poly" id="CO" title="CO" alt="CO" coords ="160, 132, 152, 185, 225, 193, 229, 139" href ="javascript:alert('CO');" /> 
    <area shape ="poly" id="TX" title="CO" alt="TX" coords ="214, 199, 210, 261, 167, 258, 168, 262, 170, 262, 170, 267, 185, 281, 185, 285, 187, 287, 187, 290, 188, 294, 189, 296, 193, 299, 197, 300, 203, 304, 212, 294, 228, 294, 237, 309, 239, 315, 244, 323, 247, 325, 248, 331, 253, 335, 260, 344, 264, 346, 269, 347, 272, 350, 272, 332, 278,319, 315, 297, 319, 277, 311, 266, 311, 245, 300, 241, 275, 241, 262, 238, 246, 233, 247, 201, 214, 199" href ="javascript:alert('TX');" /> 

    </map> 
    </div> 

var states = ["TX", "CO"]; //initially i just want to highlight these 2 states 

$(function() { 
      $.each(states, function (index, value) { 

       $('.maphilight .TX').maphilight({ alwaysOn: true }); //this doesn't work; i've also tried several variations of this but i'm not able to reference the specific area that matches the corresponding value in the array. 

      }); 

     });

的我怎麼能解決這個問題的任何想法？

來源

2012-12-21 user1783490

如果有人遇到同樣的問題，我下面的工作：

//initializes maphilight 
$(function() { 
    $('.maphilight').maphilight({}); 

    //highlight all values in array 
    $.each(states, function (index, value) { 

     var data = $('#' + value).mouseout().data('maphilight') || {}; 
     data.alwaysOn = !data.alwaysOn; 
     $('#' + value).data('maphilight', data).trigger('alwaysOn.maphilight'); 

    }); 

});

來源

2013-01-09 15:06:23 user1783490

area標籤是map的子碼，而不是image的子碼。

你應該選擇$('map[name=usmap] #TX')，不$('.maphilight .TX')

來源

2012-12-21 16:03:24 Blazemonger

.maphilight不是.TX的祖先..這是父母的兄弟姐妹。還TX是一個ID - 所以你可以通過在ID選擇從陣列的價值 - 假設你把你的ID獨特

$(function() { 
     $.each(states, function (index, value) { 
      $('#'+ value).maphilight({ alwaysOn: true }); 
     }); 
});

來源

2012-12-21 16:05:04

從技術上講，這不是兄弟姐妹。更像一位阿姨。 – Blazemonger

@Blazemonger true ..大聲笑並沒有看到它包裹在地圖元素 –

有瑕疵，你的解決方案是有道理的，但它沒有奏效。初始代碼以突出顯示所有區域是： $（function（）{（'。maphilight'）。maphilight（{alwaysOn：true}）; }）; $（'。maphilight'）實際上引用了img標籤的類 - 我試着將這個類添加到每個區域，並且這樣做，但它也不起作用。還有其他建議嗎？我感謝幫助。謝謝。 – user1783490

html圖像映射+ jquery maphilight - 突出顯示匹配數組中值的所有區域ID

回答

相關問題