我试图尽职尽责，并发现为什么我无法在HTML网站上使用ImageMapster的功能。我已经开发了一个简单的html页面来测试我的localhost上的图像映射和imagemapster javascript来测试功能，但是看不到我错过了什么让javascript工作。
我正在努力完成两件事：
onclick事件未输入＆＃39; id＆＃39;正如我所期望的那样，到目前为止我还没有使用ImageMapster的任何功能。我确定这是一个＆＃39; noob＆＃39;错误阻止它，但我现在不知所措。
我已经创建了一个供审核的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>