1

単純な html イメージ マップと、州の名前を含む単純な配列があります。配列内のすべての州を html イメージ マップで強調表示したいと考えています。これは私の最初のコードです。HTML イメージ マップのエリア 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.

            });

        });

これを修正する方法についてのアイデアはありますか?

4

3 に答える 3

0

areaタグは、の子であり、の子ではありmapませんimage。

を選択する必要があり$('map[name=usmap] #TX')ます$('.maphilight .TX')

于 2012-12-21T16:03:24.103 に答える
0

.maphilightは.TXの祖先ではありません。これは親の兄弟です。また、TXはIDであるため、配列の値を使用してIDセレクターを渡すことができますID。

$(function () {
      $.each(states, function (index, value) {
           $('#'+ value).maphilight({ alwaysOn: true }); 
      });
});
于 2012-12-21T16:05:04.223 に答える
0

誰かがこの同じ問題に遭遇した場合、次のことがうまくいきました：

//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-09T15:06:23.517 に答える