html image map + jquery maphilight - выделите все идентификаторы областей, которые соответствуют значениям в массиве

Question

У меня есть простая карта изображений HTML и простой массив с именами состояний, я хочу, чтобы все состояния в массиве были выделены на карте изображений HTML. Это мой исходный код, все мои попытки получить ссылку на идентификатор области HTML-карты изображений не увенчались успехом:

<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.

            });

        });

Любые идеи о том, как я могу это исправить?

Answer 1

Если кто-то сталкивался с такой же проблемой, у меня сработало следующее:

//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');

    });

});

Answer 2

area метки являются детьми mapне из image,

Вы должны выбрать $('map[name=usmap] #TX')не $('.maphilight .TX')

Answer 3

.maphilight не является предком.TX.. ​​Это родной брат родителя. Также TX является идентификатором - так что вы можете просто передать селектор идентификатора со значением из массива - при условии, что вы сохраните IDуникален

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