Image portion highlight

Question

I have one image which is divided into multiple sections. The requirement is, if user clicks on a particular section, the section should get highlighted. I did some exploration for the same and came across the solution of using <map> and <area> tags, also for the particular area to be highlighted, it uses maphilight feature. So it solved my first hurdle. And then now I have another requirement which says, clicking on a particular section, the color of that particular section should change on every click. Let us suppose, user clicks on section A, on the first click, it should change to red, on the second click, it should change to green and so on till four clicks. On the last click, it should change to white. The problem here is, when I click on section A, it is working as per requirement, but as soon as I click on section B, section A's highlighting gets disappear which should not happen. Here's what I did for that:

<!Doctype HTML>

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="maphighlight.js"></script>
<script type="text/javascript">

var counter = 0;

function abc(){

if(counter == 3){
    $('.map').maphilight({ groupBy: 'title',fillColor: 'ffffff',fillOpacity: '0.0',strokeColor: 'ffffff', strokeOpacity: '0.0' });
    counter= 0;
}else if(counter == 2){
    $('.map').maphilight({ groupBy: 'title',fillColor: '3333ff',fillOpacity: '0.8',strokeColor: '3333ff' });
    counter++;
}else if(counter == 1){
    $('.map').maphilight({ groupBy: 'title',fillColor: '006600',fillOpacity: '0.8',strokeColor: '006600' });
    counter++;
}else{
    $('.map').maphilight({ groupBy: 'title',fillColor: 'ff0000',fillOpacity: '0.8',strokeColor: 'ff0000' });
    counter++;
}

}

var counter1 = 0;

function abcd(){

if(counter1 == 3){
    $('.map').maphilight({ groupBy: 'title',fillColor: 'ffffff',fillOpacity: '0.0',strokeColor: 'ffffff', strokeOpacity: '0.0' });
    counter1= 0;
}else if(counter1 == 2){
    $('.map').maphilight({ groupBy: 'title',fillColor: '3333ff',fillOpacity: '0.8',strokeColor: '3333ff' });
    counter1++;
}else if(counter1 == 1){
    $('.map').maphilight({ groupBy: 'title',fillColor: '006600',fillOpacity: '0.8',strokeColor: '006600' });
    counter1++;
}else{
    $('.map').maphilight({ groupBy: 'title',fillColor: 'ff0000',fillOpacity: '0.8',strokeColor: 'ff0000' });
    counter1++;
}

}


</script>

</head>
<body>
<img src="SensorygraphicRight.jpg"  alt="Planets" class="map" border="none" usemap="#planetmap" hidefocus="true" style="float:left"/>

<map name="planetmap">

<!-- For A -->
<area id="sensory" alt="" name="A" title="A" onclick="abc();" shape="poly"  coords="74,256,72,298,69,336,66,367,66,383,90,386,97,317,100,289,101,255">
<area alt="" title="A" id="sensory1" shape="poly" coords="308,306,303,341,301,380,328,382,322,349,332,309" />
</area>
<!-- For B -->
<area alt="" name="B" title="B"  onclick="abcd();"  shape="poly" coords="101,254,101,291,97,318,92,341,92,365,91,385,114,385,117,342,123,317,129,288,131,274,132,266,140,256" >
<area alt="" title="B"  shape="poly" coords="417,236,415,268,420,304,428,352,439,353,443,309,447,272,449,236" />
</area>
<!-- For C -->
<area alt="" name="C" title="C"  data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="139,253,130,280,129,295,123,322,119,336,116,353,113,367,113,376,114,384,115,388,122,388,126,379,131,356,129,339,135,331,141,321,146,314,148,308,154,296,156,288,160,278,163,271,163,264,166,258,165,255,137,255" >
<area alt="" title="C" href="#" data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="451,238,440,349,467,350,476,238" />
</area>
<!-- For D -->
<area alt="" name="D" title="D" href="#" data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="61,384,62,401,56,415,53,432,52,448,53,459,54,473,55,482,62,479,70,479,85,478,82,477,82,479,79,479,84,453,88,424,88,405,90,394,90,386">
<area alt="" title="D" data-maphilight='{"fillColor":"FF0000"}' href="#" shape="poly" coords="299,381,296,423,295,461,322,460,333,427,331,401,326,383" />
</area>
</map>
</body>
</html>

By this code, I am able to change the color of clicked section on every single click, but as soon as I click on another section, previously clicked section gets back to its initial color i.e., white.

How do I achieve it? Is there any way of setting the background color for clicked area?

set opacity of all section between 0.6 to 0.9 what you want and change it to 1 on click for that section OR try different colors — Nitin Dhomse, May 31 '16 at 08:30
I think you did not get what I want. Will you please read the question again.I need to change the color of section on every click and it should remain as it is when I click on section other than this. — , May 31 '16 at 08:41
take an array with collection of hex colors whatever you want, pick one of them randomly and set css as background color to your clicked section using jquery click Handler and javascript. it will persist there until page reload. — Nitin Dhomse, May 31 '16 at 08:50
Thanks but, background color or any css property does not work with ``, as I tried this solution too. — , May 31 '16 at 09:40
kindly refer http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag — RRR, May 31 '16 at 12:21
Thank you @RRR .But by this solution only that section is highlighted which is being clicked and unfortunately this is not what I want, by clicking one section(eg. Section A) ,all the other section related to it (eg. All the other A sections) should also highlighted. — , Jun 01 '16 at 05:16

Image portion highlight

0 Answers0