响应式图像映射插件适用于特定类，但不适用于img [usemap]为什么？

问题描述

我有一个img图像，其中设置了usemap属性，并用区域定义了map。我还在class="map"属性中添加了img。

现在，我正在使用image-map插件来调整图像地图的大小，并使用maphilight插件来突出显示地图区域。我正在jQuery中使用它。

如果我使用$('.map').imagemap()，则该代码似乎可以工作，但是如果我使用$('img[usemap]').imagemap()，则该代码无法工作。为什么会这样？

代码：

我的图片（HTML）的代码：

<div class="images">
    <img src="./images/front.png" alt="Front" usemap="#image-map1" class="map">
        <map name="image-map1">
            <area name="arm" class="arm" rel="arms" target="" alt="Arms" title="Arms" href="#" coords="116,231,100,238,96,245,91,255,85,265,78,282,75,294,70,312,61,334,52,344,46,361,43,377,37,406,31,427,26,451,18,481,13,508,14,529,559,19,582,25,591,586,36,567,40,549,28,522,32,500,461,48,442,59,430,69,409,81,382,353,95,330,106,307,114,286,115,259,120,242" shape="poly">
            <area class="arm" rel="arms" target="" alt="Arms" title="Arms" href="#" coords="287,230,303,242,311,253,318,261,324,275,327,332,310,342,355,354,360,378,367,374,435,380,463,387,501,517,542,385,565,583,590,370,587,371,568,364,557,362,521,372,505,479,356,452,396,320,363,314,339,292,272,289,247" shape="poly">
            <area name="leg" class="leg" target="" alt="Legs" title="Legs" href="#" coords="277,431,271,450,264,474,243,485,236,492,215,506,204,510,190,507,179,503,159,490,146,477,133,456,122,121,441,116,449,110,495,107,512,527,545,104,558,593,622,118,650,126,674,137,700,135,719,136,737,757,771,788,132,798,130,821,857,141,885,147,918,151,954,150,988,145,1006,1018,1026,174,181,1017,184,997,980,180,959,178,939,906,876,189,187,834,183,797,772,747,192,707,191,643,188,619,193,570,197,201,516,208,531,211,592,212,612,216,635,668,210,722,750,224,221,793,217,835,861,218,883,223,909,228,941,964,996,226,1010,1021,239,1023,260,1024,267,1025,270,1019,262,1011,1002,254,979,953,927,893,858,273,824,792,767,746,725,704,686,654,297,579,540,293,511,290,482,287,465,284,439" shape="poly">
            <area name="abs" class="abs" target="" alt="Abdomen" title="Abdomen" href="#" coords="186,175,166,302,155,142,313,329,139,373,134,391,128,407,125,422,124,429,443,140,464,153,160,167,489,177,504,199,209,234,235,496,246,472,458,280,432,277,408,268,390,263,375,359,341,319,309,247,233,219,213,276,205,281,203,291,295,283,275" shape="poly">
        </map>
</div>

我的jQuery代码：

//This works
$(document).ready(() => {

    // -- image map plug-in code
    $('.map').maphilight();
    $('.map').imageMap(0);
}

//This doesn't work
$(document).ready(() => {

    // -- image map plug-in code
    $('img[usemap]').maphilight();
    $('img[usemap]').imageMap(0);
}

P.S .： maphilight可以同时使用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）