I've attempted to do my due diligence and discover why I can't get the functionality of ImageMapster to work on an html site. I've developed a simple html page to test the image map and imagemapster javascript on my localhost to test the features, but cannot see what I am missing to get the javascript to work.
I am trying to accomplish two things:
- Inverse highlighting (where the image is darkened and the highlighted area is brighter)
- onclick event that will populate an INPUT field
The onclick event does not input the 'id' as I'd expect it to and I have not gotten any functions of ImageMapster to work thus far. I'm sure it is a 'noob' mistake that is preventing it, but I'm now at a loss.
I've created a JSFiddle project for review: 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>