Карта изображения с проблемами реализации ImageMapster
Я попытался проявить должную осмотрительность и выяснить, почему я не могу заставить функционал ImageMapster работать на html-сайте. Я разработал простую html-страницу для тестирования карты изображений и javascript imagemapster на своем локальном хосте для проверки функций, но не вижу, что мне не хватает, чтобы заставить работать javascript.
Я пытаюсь сделать две вещи:
- Инверсное выделение (когда изображение затемнено, а выделенная область ярче)
- событие onclick, которое заполнит поле INPUT
Событие onclick не вводит "id", как я ожидал, и я до сих пор не получил никаких функций ImageMapster для работы. Я уверен, что это ошибка 'noob', которая препятствует этому, но сейчас я в растерянности.
Я создал проект 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>