Changing mapped image to another mapped image - javascript

I have a mapped image, where I have five areas (five objects which are interesting for me). After clicking these five areas I want to change an image and therefore change map. It's like a game where you should find things.
My problem is that, when I change image I have an error, I use mapper.js.
Uncaught TypeError: Cannot read property 'getContext' of null
My code: (HTML)
<div id="myDiv">
<img id="MainImage" class="mapper"
src="0100.png" border="0" width="1000" height="707" orgWidth="1000" orgHeight="707" usemap="#map1" />
</div>
<map name="map1" id="map1">
<area id="0101" shape="poly" onclick='myFunc(id)'
coords="615,559,637,546,658,542,658,585,677,667,661,669,641,675,618,619" style="outline:none;" target="_self" />
<area id="0102" shape="poly" onclick='myFunc(id)'
coords="903,537,919,534,928,554,948,659,935,662,922,626,915,659,902,657" style="outline:none;" target="_self" />
....
<area id="0105" shape="poly" onclick='myFunc(id)'
coords="243,364,259,364,262,385,269,405,275,441,245,443" style="outline:none;" target="_self" />
</map>
<map name="map2" id="map2">
<area id="0201" shape="poly"
coords="26,292,34,283,47,298,38,312,23,313" style="outline:none;" target="_self" />
......
<area id="0210" shape="poly"
coords="685,505,696,472,716,498,713,572,688,566" style="outline:none;" target="_self" />
</map>
And here goes JavaScript:
var clickedIDs = [];
var currLength = 5;
function myFunc(id) {
if (clickedIDs.indexOf(id) != -1) {
return;
}
clickedIDs.push(id);
document.getElementById(id).className = "noborder icolor00ff00";
if (clickedIDs.length == currLength) {
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = '<img id=\'MainImage\' class=\'mapper\' src=\'0200.png\' border=0 width=1000 height=707 orgWidth=1000 orgHeight=707 usemap=\'#map2\' />';
}
}
When I click first five objects and change image using InnerHTML I have error.

Related

How can I get user selection on image maps to js variable

I mapped an image and I want to take ids of those maps as an answer to my js variable.
<img src="img/beyin3.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="cevap = 'frontal'" id="frontal" alt="" title="" href="#" shape="poly" coords="228,485,282,375,323,305,353,269,400,166,402,120,412,84,341,114,265,142,198,187,130,243,90,331,94,406,107,461" />
<area alt="" title="" href="#" shape="poly" coords="388,572,464,533,522,509,615,477,670,452,701,409,736,372,736,348,625,332,555,333,498,351,444,374,385,402,337,451,301,489,312,528" />
<area alt="" title="" href="#" shape="poly" coords="456,274,562,273,656,283,741,286,804,249,790,210,728,174,695,145,655,118,579,104,547,99" />
<area alt="" title="" href="#" shape="poly" coords="757,460,837,456,876,443,894,411,904,380,904,347,889,330,871,303,855,280,846,278,830,278,799,309" />
</map>
<p style="text-align:bottom; margin-top:30%;">
<h1><p id="soru"></p></h1></center>
Javascript code
function myFunction() {
var ran = Math.floor((Math.random() * soruCevap.length));
document.getElementById("soru").innerHTML = soruCevap[ran][0];
var cevap;
if(cevap.equals("frontal")){
document.getElementById("soru").innerHTML = cevap;
} else if(cevap.equals("temporal")){
} else if(cevap.equals("paryetal")){
} else if(cevap.equals("oksipital")){
}
}

JavaScript does not have an equals method unless you've monkeypatched some data types. Possibly you've confused java and javascript.
What you should do is, to change
if(cevap.equals("frontal"))
to,
if(cevap === "frontal")

Keeping two colours on simultaneously using maphilight jquery plugin

I am currently using David Lynch's maphighlight jquery plugin.
link - http://davidlynch.org/projects/maphilight/docs/
I would like to have two different colours on simultaneously on an image map , with the alwaysOn feature set to true.
I have attached my code snippet below. Its key features are :
1)The default highlight on hover is green and when you double click on the image, the colour changes to red.
2) Once you have chosen your colour, you left click, hold the mousedown and drag through multiple image areas to highlight them.
3) You can also click on already highlighted areas to remove the highlight.
The one additional feature that I badly need is: After you click and drag and highlight a number of areas . When I double click (which changes the highlight hover colour), I would like the already highlighted areas to remain as they are and not change colour.
The current problem is when I double click all the highlighted areas change colour.
Any help regarding this would be very much appreciated!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js">
</script>
<script type = "text/javascript">
var click_flag = 1; //changes value each time a click is made
var loop_control = 1; // is a flag to run only one click loop at a time
var down = false;
// setting mouse hover default colours
$(document).ready(function(){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000'
});
// function to change colour
$('area').dblclick(function(e){
if(click_flag == 1 && loop_control == 1){
$('.mapHighLight').maphilight({
fillColor: 'ff0000', strokeColor:'000000' // red
});
click_flag = 0;
//alert("1st loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control);
}
});
$('area').dblclick(function(e){
if(click_flag == 0 && loop_control == 0){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000' //green
});
click_flag = 1;
//alert("2nd loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control);
}
});
// this section is set the correct flag values at the right time.
function status_change(){
if(click_flag == 1){loop_control = 1};
if(click_flag == 0){loop_control = 0};
//alert("3rd loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control)
}
// the delay is to make this code run in the end, to ensure proper change of values.
$('area').dblclick(function(e){
setTimeout(status_change,500);
});
// this function is for mouse hold
$('area').bind({
mousedown : function(e){
down = true;
},
mousemove : function(e){
if(down){
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
}
},
mouseup : function(e){
down = false;
}
});
//This block is to turn off "alwaysOn" feature of maphilight plugin
$("area").click(function(e){
var data = $(this).data('maphilight') || {};
data.alwaysOn = false;//!data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class = "mapHighLight " src = "http://www.goldhillcoldtouch.co.uk/wp-content/uploads/dermatome_torso1.png" alt = "dermatomeUpperbodyFront" usemap = "#upper1">
<map class = "dMap1" name = "upper1">
<area id = "t1R" shape="poly" href="#" coords="77,95,53,59,63,43,75,34,93,19,110,11,126,4,141,1,158,2,173,3,191,4,205,5,220,6,236,6,255,7,274,8,297,8,312,10,328,9,340,8,341,16,340,27,340,38,341,52,320,52,297,52,278,51,262,50,244,48,223,47,198,46,177,46,154,48,133,54,112,61,94,73" />
<area id = "t1L" shape="poly" href="#" coords="341,10,343,52,373,50,391,50,408,49,426,50,441,50,458,51,474,52,486,56,498,62,510,68,521,82,526,93,527,96,531,90,534,80,550,35,537,23,522,17,505,10,481,5,438,6,412,9,381,9,354,10" />
<area id = "t2R" shape="poly" href="#" coords="90,121,77,95,86,82,104,69,119,60,136,53,158,48,176,46,195,45,221,46,241,48,265,50,283,51,305,52,329,53,341,52,342,95,319,95,288,93,267,92,240,92,212,91,189,91,162,92,142,96,119,103"/>
<area id = "t2L" shape="poly" href="#" coords="341,52,344,94,393,95,404,95,426,94,442,94,461,95,474,97,492,101,502,107,512,115,526,96,517,78,505,67,490,58,466,52,433,51,404,51,376,51,353,51" />
<area id = "t3R" shape="poly" href="#" coords="87,144,85,127,105,112,120,104,141,98,162,93,190,91,211,90,238,92,266,92,286,94,317,96,331,95,342,94,343,138,316,140,282,139,250,136,220,133,189,132,162,131,139,132,113,136" />
<area id = "t3L" shape="poly" href="#" coords="342,95,342,139,365,138,390,136,416,135,440,134,460,132,480,131,500,135,516,142,516,124,509,114,491,102,467,96,430,95,394,96,362,95" />
<area id = "t4R" shape="poly" href="#" coords="341,139,341,190,321,190,295,192,268,192,244,192,221,191,184,190,170,188,153,187,136,184,110,179,98,174,88,171,85,145,100,139,120,134,140,132,160,130,182,132,206,133,237,135,256,137,275,139,296,140,318,140"/>
<area id = "t4L" shape="poly" href="#" coords="341,139,342,190,364,192,396,194,417,192,445,190,466,183,481,179,496,174,505,168,515,162,515,140,498,134,473,131,448,134,420,136,393,136,368,139,349,139" />
<area id = "t5R" shape="poly" href="#" coords="341,191,342,239,326,237,312,235,285,237,261,240,234,239,210,239,189,237,169,236,149,233,129,229,113,225,100,219,90,213,88,171,98,176,110,181,129,185,149,188,172,191,196,192,218,192,237,193,262,193,287,193,314,192,325,192" />
<area id = "t5L" shape="poly" href="#" coords="342,191,342,239,364,241,393,240,417,240,443,235,465,231,480,226,494,220,504,216,512,208,514,207,513,163,504,170,487,179,465,185,439,192,417,193,400,195,364,193" />
<area id = "t6R" shape="poly" href="#" coords="341,239,342,280,318,283,294,283,272,283,252,280,226,280,205,278,182,276,161,273,146,267,132,261,117,254,105,247,94,240,93,213,110,223,128,230,152,233,172,235,197,236,229,239,254,239,281,238,304,235,317,235,331,238" />
<area id = "t6L" shape="poly" href="#" coords="342,239,343,283,368,282,392,281,416,279,436,275,455,268,472,261,486,253,496,248,505,240,512,236,515,208,501,217,486,224,458,233,432,237,402,240,372,241,353,240" />
<area id = "t7R" shape="poly" href="#" coords="341,283,343,336,322,336,288,333,262,332,231,328,209,323,190,320,172,315,152,310,136,305,120,299,108,289,102,287,96,240,108,249,125,259,144,267,166,274,188,279,211,280,242,282,269,283,294,284,317,284" />
<area id = "t7L" shape="poly" href="#" coords="342,282,344,334,373,331,406,327,428,322,451,314,472,307,490,296,501,287,506,279,513,234,505,240,489,250,473,259,449,268,428,275,418,277,389,280,357,281" />
<area id = "t8R" shape="poly" href="#" coords="341,335,342,374,319,375,298,377,276,377,248,373,224,368,204,362,179,355,158,348,140,342,128,336,117,330,105,288,116,295,128,303,143,307,162,312,181,318,200,322,224,326,249,331,273,332,298,334,325,335" />
<area id = "t8L" shape="poly" href="#" coords="342,335,342,374,354,374,374,372,392,370,408,365,424,360,438,354,449,348,462,341,474,336,486,328,498,319,502,303,505,290,505,283,498,290,488,298,472,307,455,311,437,317,418,322,396,326,377,331" />
<area id = "t9R" shape="poly" href="#" coords="336,374,337,424,329,423,320,419,310,420,299,422,286,423,277,423,261,418,246,412,234,403,217,394,201,388,185,382,169,378,156,374,140,368,131,362,122,358,117,329,125,334,133,339,146,344,158,348,175,354,188,358,204,363,218,366,232,370,251,374,265,375,282,376,296,376,314,376" />
<area id = "t9L" shape="poly" href="#" coords="336,376,337,424,358,423,372,419,385,412,406,403,418,395,430,389,445,381,462,373,474,367,487,358,493,352,499,319,490,327,478,334,464,343,451,349,433,357,417,363,396,369,366,375,345,376" />
<area id = "t10R" shape="poly" href="#" coords="330,424,331,482,310,482,296,481,274,477,254,469,238,460,227,449,206,435,195,427,177,417,164,412,150,405,138,398,128,393,122,359,132,365,148,372,162,377,178,383,195,389,212,395,228,401,244,411,260,418,272,423,287,424,303,423,315,420,324,422" />
<area id = "t10L" shape="poly" href="#" coords="330,424,333,481,354,479,368,476,380,469,392,463,401,453,414,440,423,429,437,419,449,410,463,402,476,393,488,387,493,351,486,359,474,367,459,375,440,384,428,391,414,399,402,405,385,414,368,419,351,424" />
<area id = "t11R" shape="poly" href="#" coords="316,481,317,545,298,546,279,544,264,540,250,533,235,525,221,511,212,498,200,480,188,467,173,454,160,444,146,437,134,429,125,420,127,391,141,401,157,409,177,417,193,426,212,439,233,456,246,467,265,473,282,479,301,482" />
<area id = "t11L" shape="poly" href="#" coords="317,482,317,545,340,542,359,536,376,529,392,518,406,506,418,487,429,473,442,458,455,443,466,435,483,426,492,424,489,387,474,394,459,403,443,412,433,420,422,430,410,442,400,452,386,466,368,475,342,481" />
<area id = "t12R" shape="poly" href="#" coords="300,547,301,596,278,596,262,593,247,588,234,580,228,568,221,557,210,536,200,521,187,507,176,497,160,481,147,475,133,464,126,460,122,420,134,429,146,436,159,444,177,457,193,473,206,489,218,509,235,525,250,535,270,542" />
<area id = "t12L" shape="poly" href="#" coords="300,547,302,597,329,595,347,594,367,586,382,573,394,553,406,533,419,515,432,497,448,482,464,469,480,460,488,457,492,424,477,429,462,438,447,451,436,464,424,480,413,495,400,511,377,527,358,537,321,545" />
</map>

I was unable to achieve the original features I wanted but I did find an alternate solution using maphilight . I used the "hover" and "click & drag" events to be green in colour. After that I set the "click" event to turn clicked areas red. This way I was able to have two colours on at the same time with no mapped area having a fixed colour setting.
I have attached the code snippet along with this answer. Just in case someone might find it useful.
Please note that this feature has only been tested with jquery 1.11.1 or 1.11.2 version
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/jquery.maphilight.js">
</script>
<script type = "text/javascript">
var click_flag = 1; //changes value each time a click is made
var loop_control = 1; // is a flag to run only one click loop at a time
var down = false;
// setting mouse hover default colours
$(document).ready(function(){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000'
});
// this function is for mouse hold
$('area').bind({
mousedown : function(){
down = true;
},
mousemove : function(){
if(down){
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = '00ff00';
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
$(this).data('maphilight', data).trigger('fillColor.maphilight');
}
},
mouseup : function(){
down = false;
}
});
//This block is to turn off "alwaysOn" feature of maphilight plugin
$("area").click(function(){
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
data.fillColor = 'ff0000';
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
$(this).data('maphilight', data).trigger('fillColor.maphilight');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img class = "spot mapHighLight " src = "http://www.goldhillcoldtouch.co.uk/wp-content/uploads/dermatome_torso1.png" alt = "dermatomeUpperbodyFront" usemap = "#upper1">
<map class = "dMap1" name = "upper1">
<area id = "t1R" shape="poly" href="#" coords="77,95,53,59,63,43,75,34,93,19,110,11,126,4,141,1,158,2,173,3,191,4,205,5,220,6,236,6,255,7,274,8,297,8,312,10,328,9,340,8,341,16,340,27,340,38,341,52,320,52,297,52,278,51,262,50,244,48,223,47,198,46,177,46,154,48,133,54,112,61,94,73" />
<area id = "t1L" shape="poly" href="#" coords="341,10,343,52,373,50,391,50,408,49,426,50,441,50,458,51,474,52,486,56,498,62,510,68,521,82,526,93,527,96,531,90,534,80,550,35,537,23,522,17,505,10,481,5,438,6,412,9,381,9,354,10" />
<area id = "t2R" shape="poly" href="#" coords="90,121,77,95,86,82,104,69,119,60,136,53,158,48,176,46,195,45,221,46,241,48,265,50,283,51,305,52,329,53,341,52,342,95,319,95,288,93,267,92,240,92,212,91,189,91,162,92,142,96,119,103"/>
<area id = "t2L" shape="poly" href="#" coords="341,52,344,94,393,95,404,95,426,94,442,94,461,95,474,97,492,101,502,107,512,115,526,96,517,78,505,67,490,58,466,52,433,51,404,51,376,51,353,51" />
<area id = "t3R" shape="poly" href="#" coords="87,144,85,127,105,112,120,104,141,98,162,93,190,91,211,90,238,92,266,92,286,94,317,96,331,95,342,94,343,138,316,140,282,139,250,136,220,133,189,132,162,131,139,132,113,136" />
<area id = "t3L" shape="poly" href="#" coords="342,95,342,139,365,138,390,136,416,135,440,134,460,132,480,131,500,135,516,142,516,124,509,114,491,102,467,96,430,95,394,96,362,95" />
<area id = "t4R" shape="poly" href="#" coords="341,139,341,190,321,190,295,192,268,192,244,192,221,191,184,190,170,188,153,187,136,184,110,179,98,174,88,171,85,145,100,139,120,134,140,132,160,130,182,132,206,133,237,135,256,137,275,139,296,140,318,140"/>
<area id = "t4L" shape="poly" href="#" coords="341,139,342,190,364,192,396,194,417,192,445,190,466,183,481,179,496,174,505,168,515,162,515,140,498,134,473,131,448,134,420,136,393,136,368,139,349,139" />
<area id = "t5R" shape="poly" href="#" coords="341,191,342,239,326,237,312,235,285,237,261,240,234,239,210,239,189,237,169,236,149,233,129,229,113,225,100,219,90,213,88,171,98,176,110,181,129,185,149,188,172,191,196,192,218,192,237,193,262,193,287,193,314,192,325,192" />
<area id = "t5L" shape="poly" href="#" coords="342,191,342,239,364,241,393,240,417,240,443,235,465,231,480,226,494,220,504,216,512,208,514,207,513,163,504,170,487,179,465,185,439,192,417,193,400,195,364,193" />
<area id = "t6R" shape="poly" href="#" coords="341,239,342,280,318,283,294,283,272,283,252,280,226,280,205,278,182,276,161,273,146,267,132,261,117,254,105,247,94,240,93,213,110,223,128,230,152,233,172,235,197,236,229,239,254,239,281,238,304,235,317,235,331,238" />
<area id = "t6L" shape="poly" href="#" coords="342,239,343,283,368,282,392,281,416,279,436,275,455,268,472,261,486,253,496,248,505,240,512,236,515,208,501,217,486,224,458,233,432,237,402,240,372,241,353,240" />
<area id = "t7R" shape="poly" href="#" coords="341,283,343,336,322,336,288,333,262,332,231,328,209,323,190,320,172,315,152,310,136,305,120,299,108,289,102,287,96,240,108,249,125,259,144,267,166,274,188,279,211,280,242,282,269,283,294,284,317,284" />
<area id = "t7L" shape="poly" href="#" coords="342,282,344,334,373,331,406,327,428,322,451,314,472,307,490,296,501,287,506,279,513,234,505,240,489,250,473,259,449,268,428,275,418,277,389,280,357,281" />
<area id = "t8R" shape="poly" href="#" coords="341,335,342,374,319,375,298,377,276,377,248,373,224,368,204,362,179,355,158,348,140,342,128,336,117,330,105,288,116,295,128,303,143,307,162,312,181,318,200,322,224,326,249,331,273,332,298,334,325,335" />
<area id = "t8L" shape="poly" href="#" coords="342,335,342,374,354,374,374,372,392,370,408,365,424,360,438,354,449,348,462,341,474,336,486,328,498,319,502,303,505,290,505,283,498,290,488,298,472,307,455,311,437,317,418,322,396,326,377,331" />
<area id = "t9R" shape="poly" href="#" coords="336,374,337,424,329,423,320,419,310,420,299,422,286,423,277,423,261,418,246,412,234,403,217,394,201,388,185,382,169,378,156,374,140,368,131,362,122,358,117,329,125,334,133,339,146,344,158,348,175,354,188,358,204,363,218,366,232,370,251,374,265,375,282,376,296,376,314,376" />
<area id = "t9L" shape="poly" href="#" coords="336,376,337,424,358,423,372,419,385,412,406,403,418,395,430,389,445,381,462,373,474,367,487,358,493,352,499,319,490,327,478,334,464,343,451,349,433,357,417,363,396,369,366,375,345,376" />
<area id = "t10R" shape="poly" href="#" coords="330,424,331,482,310,482,296,481,274,477,254,469,238,460,227,449,206,435,195,427,177,417,164,412,150,405,138,398,128,393,122,359,132,365,148,372,162,377,178,383,195,389,212,395,228,401,244,411,260,418,272,423,287,424,303,423,315,420,324,422" />
<area id = "t10L" shape="poly" href="#" coords="330,424,333,481,354,479,368,476,380,469,392,463,401,453,414,440,423,429,437,419,449,410,463,402,476,393,488,387,493,351,486,359,474,367,459,375,440,384,428,391,414,399,402,405,385,414,368,419,351,424" />
<area id = "t11R" shape="poly" href="#" coords="316,481,317,545,298,546,279,544,264,540,250,533,235,525,221,511,212,498,200,480,188,467,173,454,160,444,146,437,134,429,125,420,127,391,141,401,157,409,177,417,193,426,212,439,233,456,246,467,265,473,282,479,301,482" />
<area id = "t11L" shape="poly" href="#" coords="317,482,317,545,340,542,359,536,376,529,392,518,406,506,418,487,429,473,442,458,455,443,466,435,483,426,492,424,489,387,474,394,459,403,443,412,433,420,422,430,410,442,400,452,386,466,368,475,342,481" />
<area id = "t12R" shape="poly" href="#" coords="300,547,301,596,278,596,262,593,247,588,234,580,228,568,221,557,210,536,200,521,187,507,176,497,160,481,147,475,133,464,126,460,122,420,134,429,146,436,159,444,177,457,193,473,206,489,218,509,235,525,250,535,270,542" />
<area id = "t12L" shape="poly" href="#" coords="300,547,302,597,329,595,347,594,367,586,382,573,394,553,406,533,419,515,432,497,448,482,464,469,480,460,488,457,492,424,477,429,462,438,447,451,436,464,424,480,413,495,400,511,377,527,358,537,321,545" />
</map>
</body>

can't insert area tags into map with jquery

I want dynamically add area to a map. So I do
....
var area = '<area href="#" shape="poly" coords="'+coors4+'" id="area4">';
alert(area);
$('#number_areas').append(area);
$('[id*="area"]').mapster('select');
.....
<map name="number_areas" id="number_areas">
</map>
so on alert I get <area href="#" shape="poly" coords="477,1,572,1,572,96,477,96" id="area4"> but map tag is still empty

Javascript invalid label error

I am sorry if this question is a repeat of someother. I have looked into some of them but they don't answer my particular question.
I get an "invalid label" error where I am printing my alert statement in the code below:
$(document).ready(
function(){
if( $('map#map').length > 0 ){
//alert('found a map!');
$('map#map area').each($area,
function(i, val){
alert('Found: ' + val ):
}
);
}
}
);
I get the same error is I do the following: alert('Found: ' + $(this) );
Can anyone tell me why this is happening, please?
ps: the elements I am attempting to read are as follows:
<map id="map" name="imgmap20116293122">
<area alt="" coords="11,76,97,127" href="" shape="rect" target="" title="" />
<area alt="" coords="12,28,96,74" href="" shape="rect" target="" title="" />
<area alt="" coords="100,28,160,73" href="" shape="rect" target="" title="" />
<area alt="" coords="162,28,221,73" href="" shape="rect" target="" title="" />
<area alt="" coords="502,239,549,282" href="" shape="rect" target="" title="" />
<area alt="" coords="473,284,554,330" href="" shape="rect" target="" title="" /-->

You've got a : instead of a ; at the end of the line. Change
alert('Found: ' + val ):
to
alert('Found: ' + val );
See also label # MDC docs.

You have a colon at the end of the statement. Change that to a semicolon.
Also, you have an extra parameter $area in the each method, which is not supported. If you remove that, the code will run.

You put a colon in stead of a semicolon:
alert('Found: ' + val );

How to use maphilight append icon(or image) on the map area?

I used jquery.maphilight, html map and area on the layout
This is my layout codepen.
(codepen here)
I want append status icon/image on red color area like this
so....what should I do?
If jquery.maphilight can't do that, Could recommend me other javascript?
<!DOCTYPE html>
<html>
<head></hrad>
<body>
<div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png" alt="" usemap="#PClayout">
</div>
<map name="PClayout">
<!-- working -->
<area shape="rect" coords="200,100,300,200" id='PC1' href="#">
<!-- close-->
<area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!-- Error-->
<area shape="rect" coords="200,250,300,350" id='PC3' href="#">
</map>
</body>
</html>
function layoutalert(el, Color){
var data = $(el).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = Color;
data.strokeColor = Color;
$(el).data('maphilight', data).trigger('alwaysOn.maphilight');
$(el).data('maphilight', data).trigger('fillColor.maphilight');
$(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();

Categories

Resources