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 回答