Javascript 图像部分高光
我有一个图像被分成多个部分。要求是，如果用户单击某个特定部分，该部分应突出显示。我对此做了一些探索，发现了使用Javascript 图像部分高光,javascript,jquery,html,css,imagemap,Javascript,Jquery,Html,Css,Imagemap,我有一个图像被分成多个部分。要求是，如果用户单击某个特定部分，该部分应突出显示。我对此做了一些探索，发现了使用和标记的解决方案，对于要突出显示的特定区域，它使用maphilight功能。所以它解决了我的第一个障碍。现在我有另一个要求，点击一个特定的部分，该部分的颜色应该在每次点击时改变。让我们假设，用户点击A部分，在第一次点击时，它应该变成红色，在第二次点击时，它应该变成绿色，依此类推，直到点击四次。最后一次单击时，它应变为白色。这里的问题是，当我点击A部分时，它按照要求工作，但只要我点击B部分
maphilight<!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>
var计数器=0；
函数abc（）{
如果（计数器==3）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'ffffffff'，fillOpacity:'0.0'，strokeColor:'ffffffff'，strokepacacity:'0.0'}）；
计数器=0；
}否则如果（计数器==2）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'3333ff'，fillOpacity:'0.8'，strokeColor:'3333ff'}）；
计数器++；
}else if（计数器==1）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'006600'，fillOpacity:'0.8'，strokeColor:'006600'）；
计数器++；
}否则{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'ff0000'，fillOpacity:'0.8'，strokeColor:'ff0000'）；
计数器++；
}
}
var=1=0；
函数abcd（）{
如果（计数器1==3）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'ffffffff'，fillOpacity:'0.0'，strokeColor:'ffffffff'，strokepacacity:'0.0'}）；
计数器1=0；
}else if（计数器1==2）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'3333ff'，fillOpacity:'0.8'，strokeColor:'3333ff'}）；
计数器1++；
}else if（计数器1==1）{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'006600'，fillOpacity:'0.8'，strokeColor:'006600'）；
计数器1++；
}否则{
$（'.map'）.maphilight（{groupBy:'title'，fillColor:'ff0000'，fillOpacity:'0.8'，strokeColor:'ff0000'）；
计数器1++；
}
}
我如何做到这一点？有没有办法设置点击区域的背景色 将所有部分的不透明度设置为0.6到0.9之间，然后在单击该部分时将其更改为1，或者尝试不同的颜色。我认为您没有得到我想要的。请你再看一遍这个问题。我需要在每次单击时更改节的颜色，并且它应该保持在我单击除此之外的节时的颜色。获取一个包含十六进制颜色集合的数组，随机选择其中一个，并使用jquery click Handler和javascript将css设置为单击部分的背景色。它将一直存在，直到重新加载页面。谢谢，但是，背景色或任何css属性都不适用于