我已尝试尽职调查并发现为什么我无法让 ImageMapster 的功能在 html 网站上工作。我开发了一个简单的 html 页面来测试我的本地主机上的图像映射和 imagemapster javascript 以测试功能，但看不到我缺少什么来让 javascript 工作。
我正在尝试完成两件事：
- 反高亮（图像变暗，高亮区域更亮）
- 将填充 INPUT 字段的 onclick 事件
onclick 事件没有像我期望的那样输入“id”，并且到目前为止我还没有让 ImageMapster 的任何功能起作用。我确信这是一个“菜鸟”错误阻止了它，但我现在不知所措。
我创建了一个 JSFiddle 项目以供审查： JSFiddle Code
document.addEventListener("click", update(this.id), true);
function update(t) {
document.form1.text1.value = t;
}
var img = $('img'),
darkImg,
originalImg = img[0].src,
darkFilter = $('<div/>').width(img.width()).height(img.height())
.attr('id', 'dark-filter')
.css({
position: 'absolute',
left: '0',
top: '0',
backgroundColor: "#000000",
opacity: 0.6
});
img.mapster({
mapKey: 'id',
render_highlight: {
altImage: 'http://dev.punapermaculture.org/wp-content/uploads/2014/12/Puna-green.jpg',
strokeWidth: 6,
stroke: true,
strokeColor: 'eeeeee',
fillColor: 'ffffff',
fillOpacity: 0.7
},
render_select: {
fillColor: 'ff0000'
}
}).bind('mouseover', function() {
//$('img.mapster_el')[0].src=darkImg;
img.parent().find(".mapster_el").eq(0).after(darkFilter);
}).bind('mouseout', function(e) {
if (!e.relatedTarget || e.relatedTarget.nodeName !== 'AREA') {
// $('img.mapster_el')[0].src=originalImg;
darkFilter.remove();
}
});<script src="http://50.87.150.40/wp-content/themes/cbox-child/assets/js/jquery.imagemapster.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<map id="imgmapPuna" name="imgmapPuna">
<area shape="poly" href="#" alt="Keaau" id="Keauu" full="Keaau" coords="6,179,107,157,147,158,199,137,289,116,369,76,443,49,490,10,528,3,601,53,575,57,550,97,479,142,478,170,451,192,438,213,315,266,258,241,183,235,128,244,3,177" />
<area shape="poly" href="#" alt="Waikahekahe" id="Waikahekahe" full="Waikahekahe" coords="221,340,128,245,186,239,258,242,315,269,445,213,454,192,481,169,482,137,555,97,576,61,595,56,612,81,596,96,580,98,569,137,557,141,556,177,480,255,446,260,416,308,370,329,345,324,290,355,249,359,209,332"
/>
<area shape="poly" href="#" alt="Mahuu" id="Mahuu" full="Mahuu" coords="613,80,628,94,618,128,590,156,573,189,571,216,497,269,462,293,418,306,443,265,482,256,559,177,559,142,572,135,581,100,598,98,610,82" />
<area shape="poly" href="#" alt="Keonepoke" id="Keonepoke" full="Keonepoke" coords="653,116,632,101,618,134,588,159,571,192,571,223,463,293,421,308,372,330,347,328,294,354,250,361,218,341,237,374,261,389,273,406,311,396,317,383,347,369,389,355,439,352,480,340,502,317,587,271,603,218,615,175,634,139,645,129,651,117"
/>
<area shape="poly" href="#" alt="Waiakahiula" id="Waiakahiula" full="Waiakahiula" coords="676,130,652,113,647,134,631,143,599,234,631,180,657,168,675,133" />
<area shape="poly" href="#" alt="Nanawale" id="Nanawale" full="Nanawale" coords="677,129,695,134,675,189,659,206,652,236,599,284,553,316,534,320,527,330,506,324,493,326,509,313,590,268,602,227,633,180,658,167,678,127" />
<area shape="poly" href="#" alt="Kahuwai" id="Kahuwai" full="Kahuwai" coords="725,148,699,141,677,190,662,205,652,241,602,285,630,280,662,268,670,248,680,239,679,223,699,204,697,184,723,151" />
<area shape="poly" href="#" alt="Puua" id="Puua" full="Puua" coords="728,149,755,162,746,177,731,199,709,201,697,212,695,186,730,145" />
<area shape="poly" href="#" alt="Kula" id="" full="" coords="775,173,751,162,734,199,709,201,692,213,676,226,682,239,707,216,739,208,748,198,751,188,768,179,770,170" />
<area shape="poly" href="#" alt="Kapoho" id="Kapoho" full="Kapoho" coords="766,246,770,210,781,185,773,172,749,187,739,203,707,217,676,242,668,257,694,238,721,228,737,226,754,235,762,242" />
<area shape="poly" href="#" alt="Pualaa" id="Pualaa" full="Pualaa" coords="755,259,764,248,747,231,734,224,717,225,688,243,692,244,711,238,723,245,740,245,752,252" />
<area shape="poly" href="#" alt="Poihoiki" id="Poihoiki" full="Poihoiki" coords="753,263,748,252,740,247,720,246,705,237,681,248,687,252,699,251,722,259,740,269" />
<area shape="poly" href="#" alt="Keahialaka" id="Keahialaka" full="Keahialaka" coords="741,272,723,289,703,273,691,272,682,258,665,265,665,258,687,249,707,252,736,268" />
<area shape="poly" href="#" alt="Kaukulau" id="Kaukulau" full="Kaukulau" coords="701,305,719,288,700,271,675,258,649,273,673,277,682,287,694,294,703,305" />
<area shape="poly" href="#" alt="Kauaea" id="Kauaea" full="Kauaea" coords="702,309,693,296,642,271,630,277,665,295,685,305,693,316" />
<area shape="poly" href="#" alt="Opihikau" id="Opihikau" full="Opihikau" coords="671,337,687,315,684,305,629,278,610,284,643,300,656,317,663,327,668,330" />
<area shape="poly" href="#" alt="Kehena" id="Kehena" full="Kehena" coords="668,338,649,345,636,358,623,361,620,377,609,371,594,349,564,333,552,327,542,318,568,308,599,286,608,284,643,301,669,335" />
<area shape="poly" href="#" alt="Keokea" id="Keokea" full="Keokea" coords="594,399,618,379,607,371,593,350,550,327,541,318,533,324,518,328,529,339,550,350,565,375,576,381,591,397" />
<area shape="poly" href="#" alt="Kaimu" id="Kaimu" full="Kaimu" coords="575,424,579,410,592,398,564,376,549,352,528,340,516,327,497,330,483,339,488,346,502,348,520,360,530,364,544,382,548,399,567,422,573,424" />
<area shape="poly" href="#" alt="Kalapana" id="Kalapana" full="Kalapana" coords="542,440,572,424,560,417,545,397,542,382,517,359,498,348,487,348,480,338,475,340,446,349,450,352,463,348,479,350,492,357,503,375,513,384,520,404,526,419,542,438" />
<area shape="poly" href="#" alt="Kii" id="Kii" full="Kii" coords="517,450,541,440,536,433,527,422,520,411,512,386,500,374,490,357,473,349,447,354,416,357,388,356,343,370,319,381,311,394,323,392,332,384,382,376,391,377,401,381,413,374,452,392,466,390,483,396,495,410,508,423,518,450"
/>
<area shape="poly" href="#" alt="Poupou" id="Poupou" full="Poupou" coords="517,451,506,424,481,397,464,390,452,393,413,377,401,381,406,388,422,398,441,407,449,414,463,421,467,435,474,447,482,458,485,466,505,459,515,452" />
<area shape="poly" href="#" alt="Kamomoa" id="Kamomoa" full="Kamomoa" coords="445,478,459,474,482,466,472,448,465,434,461,420,440,407,403,388,399,380,385,375,329,385,323,391,341,402,350,414,375,420,389,419,410,432,428,453,430,461,436,465,443,477" />
<area shape="poly" href="#" alt="Laeapuki" id="Laeapuki" full="Laeapuki" coords="443,480,423,497,411,481,377,448,330,413,313,394,323,391,339,401,350,414,377,420,389,420,410,431,428,452,430,460,437,465,443,478" />
<area shape="poly" href="#" alt="Panau" id="Panau" full="Panau" coords="366,533,387,522,405,505,419,498,410,481,377,449,333,416,310,394,286,403,304,421,306,430,341,458,351,477,354,495,359,504,365,532" />
<area shape="poly" href="#" alt="Kealakomo" id="Kealakomo" full="Kealakomo" coords="291,555,301,547,315,545,330,545,347,538,360,533,364,532,359,510,357,501,353,494,350,478,339,456,305,429,303,421,286,403,272,405,277,409,285,423,287,458,284,478,280,485,285,495,283,516,283,523,285,534,287,548,291,556"
/>
<area shape="poly" href="#" alt="Apua" id="Apua" full="Apua" coords="246,553,261,556,286,556,289,555,284,547,282,520,284,493,279,483,284,477,287,454,284,425,276,409,267,401,257,386,242,373,243,396,250,404,244,419,255,450,250,485,260,497,246,551" />
</map>
<h1>Client-Side Image Map Example</h1>
<hr>The image map below uses JavaScript functions in each of its areas. Moving over an area will display information about it in the status line. Clicking on an area places the name of the area in the text field below the image map.
<hr>
<img id="punaMap" SRC="http://dev.punapermaculture.org/wp-content/uploads/2014/12/Puna.jpg" USEMAP="#imgmapPuna">
<hr>
<form NAME="form1"> <b>Clicked Item:</b>
<input TYPE="text" NAME="text1" VALUE="Please select an item.">
</form>
<hr>
</body>