Question

I have a simple html image map and a simple array with names of states, i want all the states within the array to be highlighted in the html image map. This is my initial code, all my tries to get reference the area id of the html image map have been unsuccessful:

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

            });

        });

Any ideas of how i can fix this?

Answer 1

In case anyone comes across this same issue, the following worked for me:

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

    });

});