Question

我有一个图像被分成多个部分。要求是，如果用户点击特定部分，该部分应突出显示。我对此进行了一些探索，并遇到了使用<map>和<area>标记的解决方案，同样针对要突出显示的特定区域，它使用了maphilight功能。所以它解决了我的第一个障碍。然后现在我有另一个要求，即点击特定部分，每次点击都应该改变特定部分的颜色。让我们假设，用户点击A部分，在第一次点击时，它应该变为红色，在第二次点击时，它应该变为绿色等等，直到四次点击。在最后一次点击时，它应该变为白色。这里的问题是，当我点击A部分时，它按照要求工作，但是一旦我点击B部分，A部分突出显示就会消失，这不应该发生。这就是我为此所做的：

<!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>

通过此代码，我可以在每次单击时更改单击部分的颜色，但只要我单击另一部分，之前单击的部分就会恢复到其初始颜色，即白色。

我如何实现它？有没有办法设置点击区域的背景颜色？

图片部分突出显示

0 个答案: