z-индекс и инверсия цвета не работают в синхронизации.

Я пытался с нарушением изображения раньше. Теперь я сломал изображение и попытался. Я разбил изображение на части, чтобы использовать для навигации. Я разместил эти изображения с z-индексом друг на друга. Таким образом, изображение выглядит как одно целое изображение. Я использую карту изображения. Я хочу, чтобы изображения инвертировали цвет, когда мышь зависала над ними. Поэтому, когда мышь находится на определенной области, я изменяю z-индекс этой области и привожу эту область вверх, а затем применяю цвет, инвертирую css к этому изображению. Я написал для этого код. Но сейчас он работает неправильно. Вот мой код.z-индекс и инверсия цвета не работают в синхронизации.

function myFunction(imgid) { 
 
document.getElementById("demo").innerHTML = "I am inside myFunction function "+imgid; 
 
    document.getElementById(imgid).style.zIndex = "2"; 
 
} 
 

 

 

 
function myClick(iid) { 
 
document.getElementById("demo").innerHTML = "myClick function "+iid; 
 
    document.getElementById(iid).style.zIndex = "2"; 
 
} 
 

 
function myOnmouseout(imid) { 
 
document.getElementById("mi").innerHTML = imid + " I am inside myOnmouseout function "; 
 
    document.getElementById(imid).style.zIndex = "1"; 
 
}

#container img {position: absolute;} 
 

 

 
img.invert:hover { 
 

 

 
filter: invert(100%); 
 
\t \t \t -webkit-filter: invert(100%); 
 
\t \t \t -moz-filter: invert(100%); 
 
\t \t \t -o-filter: invert(100%); 
 
\t \t \t -ms-filter: invert(100%); 
 
\t \t \t 
 
\t \t \t 
 
\t \t } 
 
\t img.invert { 
 
\t filter: invert(0); 
 
\t \t \t -webkit-filter: invert(0); 
 
\t \t \t -moz-filter: invert(0); 
 
\t \t \t -o-filter: invert(0); 
 
\t \t \t -ms-filter: invert(0); 
 
\t \t \t 
 
\t \t } 
 
\t 
 
\t \t 
 
\t <!-- \t #12:hover { 
 
    z-index: 10; --> 
 
}

<body> 
 

 
<map name="map" id="id_1"> 
 
<div="container"> 
 
<img id="02" class="invert" src="http://i.imgur.com/fpqmClk.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="03" class="invert" src="http://i.imgur.com/TfhyWZs.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="04" class="invert" src="http://i.imgur.com/mUKWK5P.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="05" class="invert" src="http://i.imgur.com/R1JhAT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="06" class="invert"src="http://i.imgur.com/yMGFR2V.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="07" class="invert" src="http://i.imgur.com/rpCnGxL.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="08" class="invert" src="http://i.imgur.com/FWRCUs4.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="09" class="invert" src="http://i.imgur.com/Aw3NhT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="10" class="invert" src="http://i.imgur.com/gWhUtyJ.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="11" class="invert" src="http://i.imgur.com/IIJqsxf.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 
<img id="12" class="invert" src="http://i.imgur.com/a9UW5mj.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
 

 

 
</div> 
 
    <area onclick="myClick('12')" onmouseout=" myOnmouseout('12');" onmouseover="myFunction('12');" shape="poly" coords="173,223,176,222,183,224,185,217,190,199,193,192,198,187,193,176,158,132,126,92,132,93,123,79,101,97,81,123,66,149,57,170,50,194,48,211,136,217,131,225,149,225,149,221,152,221,156,215,158,208,159,197,167,189,170,179,173,177,169,171,190,176,192,187,190,190,182,198" 
 
    /> 
 

 
    <area onclick="myClick('11')" onmouseout=" myOnmouseout('11');" onmouseover="myFunction('11');" shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" 
 
    /> 
 
     
 
    <area onclick="myClick('10')" onmouseout=" myOnmouseout('10');" onmouseover="myFunction('10');" id="ch10" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268" 
 
    /> 
 
    
 
    <area onclick="myClick('09')" onmouseout=" myOnmouseout('09');" onmouseover="myFunction('09');" class="notbutton" id="ch09" class="hotspot" shape="poly" coords="252,265,255,266,256,271,267,262,275,249,279,233,296,234,291,255,282,270,272,280,268,283,274,284,270,286,274,288,271,290,275,291,272,292,328,359,319,359,331,374,349,360,366,342,381,321,392,299,400,276,404,257,407,240,318,235,323,227,278,227,272,231,269,244,262,256,252,265" 
 
    /> 
 
    
 
    <area onclick="myClick('08')" onmouseout=" myOnmouseout('08');" onmouseover="myFunction('08');" class="notbutton" id="ch08" class="hotspot" shape="poly" coords="251,188,253,181,267,192,273,200,277,208,278,212,274,213,288,220,298,207,294,207,289,196,284,186,274,174,262,166,268,166,266,164,270,162,267,161,270,159,266,158,276,142,279,151,329,78,338,85,349,94,363,108,379,129,391,152,397,168,403,189,406,211,389,213,393,206,277,225,272,222,269,209,262,197,251,188" 
 
    /> 
 
    
 
    <area onclick="myClick('07')" onmouseout=" myOnmouseout('07');" onmouseover="myFunction('07');" class="notbutton" id="ch07" class="hotspot" shape="poly" coords="247,186,248,182,251,179,239,175,228,173,216,174,206,177,199,161,213,157,225,156,239,157,254,162,254,158,256,159,257,155,258,157,259,152,260,154,292,72,296,79,302,63,286,56,263,50,242,47,213,47,188,51,166,57,149,64,188,143,179,143,201,181,208,185,218,182,236,182,247,186" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_09" shape="poly" coords="156,234,156,226,154,222,154,226,150,223,150,226,147,224,148,227,130,227,135,220,47,213,31,223,16,212,15,226,16,236,16,243,33,254,48,243,66,240,61,248,148,233,147,236,151,234,151,237,153,234,154,239,156,234" 
 
    /> 
 

 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_08" shape="poly" coords="173,230,173,227,180,224,184,228,180,230,173,230" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_07" shape="poly" coords="205,264,207,268,203,272,162,380,158,372,151,389,154,407,136,417,124,412,115,406,108,401,125,394,125,375,174,302,179,309,200,271,201,266,205,264" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_06" shape="poly" coords="261,288,260,291,263,290,262,295,264,293,264,297,266,295,275,309,266,309,305,389,321,397,319,415,330,412,341,405,347,400,347,379,330,374,318,359,328,359,272,292,274,291,271,289,275,288,269,287,273,284,267,284,261,288" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_05" shape="poly" coords="249,264,249,268,253,273,256,271,254,266,249,264" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton"id="ch06_04" shape="poly" coords="271,227,273,223,277,225,393,206,388,214,407,211,420,200,436,210,438,218,438,229,437,242,422,231,406,240,318,235,323,227,277,227,274,230,271,227" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_03" shape="poly" coords="256,163,262,166,267,165,265,164,269,162,266,161,269,159,266,158,276,142,279,150,329,78,329,59,344,51,333,45,323,39,316,36,300,45,303,63,296,80,292,72,260,154,259,153,259,158,256,155,257,159,254,158,256,163" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_02" shape="poly" coords="248,189,247,183,251,180,253,181,252,186,248,189" 
 
    /> 
 
    
 
    <area onclick="myClick('06')" onmouseout=" myOnmouseout('06');" onmouseover="myFunction('06');" class="notbutton" id="ch06_01" shape="poly" coords="199,191,203,188,207,192,205,187,207,185,202,182,178,142,188,143,149,64,133,55,133,37,122,44,112,49,107,53,107,73,123,78,135,93,126,93,199,183,199,191" 
 
    /> 
 

 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton" id="ch05_06" shape="poly" coords="16,212,31,223,47,214,50,189,55,169,62,152,70,136,81,120,92,107,105,93,118,82,123,79,107,73,107,54,91,65,73,83,57,101,45,119,36,137,27,158,20,183,17,202,16,212" 
 
    /> 
 

 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton"id="ch05_05" shape="poly" coords="108,401,125,394,125,375,112,366,97,352,83,336,69,316,61,298,54,280,49,261,47,243,33,255,16,244,20,270,27,293,34,313,45,334,57,352,71,369,88,385,108,401" 
 
    /> 
 
    
 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton" id="ch05_04" shape="poly" coords="305,389,321,398,319,415,290,427,265,433,237,436,208,436,181,432,159,426,136,417,154,407,151,391,171,399,192,404,213,407,236,407,261,404,280,399,296,393,305,389" 
 
    /> 
 
    
 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton" id="ch05_03" shape="poly" coords="406,240,423,231,437,242,434,264,429,285,424,302,416,320,404,341,390,360,375,376,357,391,347,399,347,380,331,374,345,363,358,350,370,336,380,323,387,309,395,294,399,279,403,265,406,247,406,240" 
 
    /> 
 
    
 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton"id="ch05_02" shape="poly" coords="329,77,328,58,344,52,363,66,383,85,396,101,410,123,421,144,428,164,433,182,436,199,436,210,420,200,406,211,404,191,398,169,390,149,380,131,365,110,352,97,339,86,329,77" 
 
    /> 
 
    
 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton" id="ch05_01" shape="poly" coords="132,55,134,37,152,30,174,23,200,18,219,17,240,17,260,19,276,22,291,26,303,31,316,36,300,45,303,63,284,55,265,51,250,48,234,46,215,47,194,49,175,53,157,60,149,64,132,55" 
 
    /> 
 
    
 
    <area onclick="myClick('05')" onmouseout=" myOnmouseout('05');" onmouseover="myFunction('05');" class="notbutton" id="ch04_03" shape="poly" coords="195,270,185,284,174,273,166,263,160,251,157,240,156,226,158,211,163,195,174,180,177,177,174,175,191,176,192,191,188,189,178,203,173,219,173,233,177,248,185,261,195,270" 
 
    /> 
 
    
 
    <area onclick="myClick('04')" onmouseout=" myOnmouseout('04');" onmouseover="myFunction('04');" class="notbutton" id="ch04_02" shape="poly" coords="202,283,215,275,214,279,223,280,234,280,245,277,257,271,265,264,273,253,278,241,280,233,296,235,290,257,283,269,276,276,267,285,251,292,235,297,220,297,210,295,209,298,202,283" 
 
    /> 
 
    
 
    <area onclick="myClick('04')" onmouseout=" myOnmouseout('04');" onmouseover="myFunction('04');" class="notbutton" id="ch04_01" shape="poly" coords="206,177,216,174,231,173,247,177,257,183,266,191,273,201,278,212,274,213,288,220,297,207,294,208,289,196,282,184,271,172,260,165,245,159,230,156,214,157,199,161,206,177" 
 
    /> 
 
    
 
    <area onclick="myClick('02')" onmouseout=" myOnmouseout('02');" onmouseover="myFunction('02');" id="ch02" shape="poly" coords="214,234,216,246,228,241,238,246,240,233,248,227,239,219,237,207,226,212,216,208,215,219,205,227,214,234" 
 
    /> 
 
    
 
    <area onclick="myClick('03')" onmouseout=" myOnmouseout('03');" onmouseover="myFunction('03');" id="ch03" shape="poly" coords="181,226,189,227,181,229,182,237,186,247,192,256,199,262,203,266,207,261,206,267,213,270,222,272,232,272,242,269,250,266,247,262,251,266,259,259,265,251,269,242,272,234,272,227,267,227,272,226,271,218,269,209,264,201,257,193,250,188,247,191,247,187,239,182,226,181,214,183,207,186,205,187,208,194,203,188,196,193,189,201,184,211,181,221,181,226" 
 
    /> 
 
<div> 
 
<p id="demo"></p> 
 
<p id="mi"></p> 
 
<p id="clicked"></p> 
 
</div>

источник

2016-03-11 Karen

Возможный дубликат [цвета инвертировать при наведении курсора мыши над изображением карты] (http://stackoverflow.com/questions/35922267/color-invert-on-hover-over-an-image-map) – dippas

Как Вы создали координаты s? – silviagreen

Я сгенерировал его с оригинального изображения, прежде чем ломать его. – Karen

Вот код, переработан для JQuery. Меня устраивает. Я попытаюсь понять, что не так в вашем коде, но на самом деле вам следует использовать jQuery. Вероятно, что css hover вещь мешала событиям javascript.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> 
<script> 
$(function() { 
    $('area').mouseover(function() { 
     var imgid=$(this).data('imgid'); 
     $('#demo').text("Mouseover for "+imgid); 
     $('#'+imgid) 
      .toggleClass('invert',true) 
      .css('z-index',2); 
    }).mouseout(function() { 
     var imgid=$(this).data('imgid'); 
     $('#mi').text("Mouseout for "+imgid); 
     $('#'+imgid) 
      .toggleClass('invert',false) 
      .css('z-index',1); 
    }).click(function() { 
     var imgid=$(this).data('imgid'); 
     $('#demo').text("click for "+imgid); 
     $('#'+imgid) 
      .toggleClass('invert',true) 
      .css('z-index',2); 
    }); 
}); 
</script> 
<style> 
#container img {position: absolute;} 

img.invert { 
    filter: invert(100%); 
    -webkit-filter: invert(100%); 
    -moz-filter: invert(100%); 
    -o-filter: invert(100%); 
    -ms-filter: invert(100%); 
} 


</style> 
<body> 

<map name="map" id="id_1"> 
<div="container"> 
<img id="02" src="http://i.imgur.com/fpqmClk.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="03" src="http://i.imgur.com/TfhyWZs.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="04" src="http://i.imgur.com/mUKWK5P.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="05" src="http://i.imgur.com/R1JhAT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="06" src="http://i.imgur.com/yMGFR2V.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="07" src="http://i.imgur.com/rpCnGxL.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="08" src="http://i.imgur.com/FWRCUs4.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="09" src="http://i.imgur.com/Aw3NhT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="10" src="http://i.imgur.com/gWhUtyJ.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="11" src="http://i.imgur.com/IIJqsxf.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 
<img id="12" src="http://i.imgur.com/a9UW5mj.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > 


</div> 
    <area data-imgid="12" shape="poly" coords="173,223,176,222,183,224,185,217,190,199,193,192,198,187,193,176,158,132,126,92,132,93,123,79,101,97,81,123,66,149,57,170,50,194,48,211,136,217,131,225,149,225,149,221,152,221,156,215,158,208,159,197,167,189,170,179,173,177,169,171,190,176,192,187,190,190,182,198" 
    /> 

    <area data-imgid="11" shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" 
    /> 

    <area data-imgid="10" id="ch10" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268" 
    /> 

    <area data-imgid="09" class="notbutton" id="ch09" class="hotspot" shape="poly" coords="252,265,255,266,256,271,267,262,275,249,279,233,296,234,291,255,282,270,272,280,268,283,274,284,270,286,274,288,271,290,275,291,272,292,328,359,319,359,331,374,349,360,366,342,381,321,392,299,400,276,404,257,407,240,318,235,323,227,278,227,272,231,269,244,262,256,252,265" 
    /> 

    <area data-imgid="08" class="notbutton" id="ch08" class="hotspot" shape="poly" coords="251,188,253,181,267,192,273,200,277,208,278,212,274,213,288,220,298,207,294,207,289,196,284,186,274,174,262,166,268,166,266,164,270,162,267,161,270,159,266,158,276,142,279,151,329,78,338,85,349,94,363,108,379,129,391,152,397,168,403,189,406,211,389,213,393,206,277,225,272,222,269,209,262,197,251,188" 
    /> 

    <area data-imgid="07" class="notbutton" id="ch07" class="hotspot" shape="poly" coords="247,186,248,182,251,179,239,175,228,173,216,174,206,177,199,161,213,157,225,156,239,157,254,162,254,158,256,159,257,155,258,157,259,152,260,154,292,72,296,79,302,63,286,56,263,50,242,47,213,47,188,51,166,57,149,64,188,143,179,143,201,181,208,185,218,182,236,182,247,186" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_09" shape="poly" coords="156,234,156,226,154,222,154,226,150,223,150,226,147,224,148,227,130,227,135,220,47,213,31,223,16,212,15,226,16,236,16,243,33,254,48,243,66,240,61,248,148,233,147,236,151,234,151,237,153,234,154,239,156,234" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_08" shape="poly" coords="173,230,173,227,180,224,184,228,180,230,173,230" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_07" shape="poly" coords="205,264,207,268,203,272,162,380,158,372,151,389,154,407,136,417,124,412,115,406,108,401,125,394,125,375,174,302,179,309,200,271,201,266,205,264" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_06" shape="poly" coords="261,288,260,291,263,290,262,295,264,293,264,297,266,295,275,309,266,309,305,389,321,397,319,415,330,412,341,405,347,400,347,379,330,374,318,359,328,359,272,292,274,291,271,289,275,288,269,287,273,284,267,284,261,288" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_05" shape="poly" coords="249,264,249,268,253,273,256,271,254,266,249,264" 
    /> 

    <area data-imgid="06" class="notbutton"id="ch06_04" shape="poly" coords="271,227,273,223,277,225,393,206,388,214,407,211,420,200,436,210,438,218,438,229,437,242,422,231,406,240,318,235,323,227,277,227,274,230,271,227" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_03" shape="poly" coords="256,163,262,166,267,165,265,164,269,162,266,161,269,159,266,158,276,142,279,150,329,78,329,59,344,51,333,45,323,39,316,36,300,45,303,63,296,80,292,72,260,154,259,153,259,158,256,155,257,159,254,158,256,163" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_02" shape="poly" coords="248,189,247,183,251,180,253,181,252,186,248,189" 
    /> 

    <area data-imgid="06" class="notbutton" id="ch06_01" shape="poly" coords="199,191,203,188,207,192,205,187,207,185,202,182,178,142,188,143,149,64,133,55,133,37,122,44,112,49,107,53,107,73,123,78,135,93,126,93,199,183,199,191" 
    /> 

    <area data-imgid="05" class="notbutton" id="ch05_06" shape="poly" coords="16,212,31,223,47,214,50,189,55,169,62,152,70,136,81,120,92,107,105,93,118,82,123,79,107,73,107,54,91,65,73,83,57,101,45,119,36,137,27,158,20,183,17,202,16,212" 
    /> 

    <area data-imgid="05" class="notbutton"id="ch05_05" shape="poly" coords="108,401,125,394,125,375,112,366,97,352,83,336,69,316,61,298,54,280,49,261,47,243,33,255,16,244,20,270,27,293,34,313,45,334,57,352,71,369,88,385,108,401" 
    /> 

    <area data-imgid="05" class="notbutton" id="ch05_04" shape="poly" coords="305,389,321,398,319,415,290,427,265,433,237,436,208,436,181,432,159,426,136,417,154,407,151,391,171,399,192,404,213,407,236,407,261,404,280,399,296,393,305,389" 
    /> 

    <area data-imgid="05" class="notbutton" id="ch05_03" shape="poly" coords="406,240,423,231,437,242,434,264,429,285,424,302,416,320,404,341,390,360,375,376,357,391,347,399,347,380,331,374,345,363,358,350,370,336,380,323,387,309,395,294,399,279,403,265,406,247,406,240" 
    /> 

    <area data-imgid="05" class="notbutton"id="ch05_02" shape="poly" coords="329,77,328,58,344,52,363,66,383,85,396,101,410,123,421,144,428,164,433,182,436,199,436,210,420,200,406,211,404,191,398,169,390,149,380,131,365,110,352,97,339,86,329,77" 
    /> 

    <area data-imgid="05" class="notbutton" id="ch05_01" shape="poly" coords="132,55,134,37,152,30,174,23,200,18,219,17,240,17,260,19,276,22,291,26,303,31,316,36,300,45,303,63,284,55,265,51,250,48,234,46,215,47,194,49,175,53,157,60,149,64,132,55" 
    /> 

    <area data-imgid="05" class="notbutton" id="ch04_03" shape="poly" coords="195,270,185,284,174,273,166,263,160,251,157,240,156,226,158,211,163,195,174,180,177,177,174,175,191,176,192,191,188,189,178,203,173,219,173,233,177,248,185,261,195,270" 
    /> 

    <area data-imgid="04" class="notbutton" id="ch04_02" shape="poly" coords="202,283,215,275,214,279,223,280,234,280,245,277,257,271,265,264,273,253,278,241,280,233,296,235,290,257,283,269,276,276,267,285,251,292,235,297,220,297,210,295,209,298,202,283" 
    /> 

    <area data-imgid="04" class="notbutton" id="ch04_01" shape="poly" coords="206,177,216,174,231,173,247,177,257,183,266,191,273,201,278,212,274,213,288,220,297,207,294,208,289,196,282,184,271,172,260,165,245,159,230,156,214,157,199,161,206,177" 
    /> 

    <area data-imgid="02" id="ch02" shape="poly" coords="214,234,216,246,228,241,238,246,240,233,248,227,239,219,237,207,226,212,216,208,215,219,205,227,214,234" 
    /> 

    <area data-imgid="03" id="ch03" shape="poly" coords="181,226,189,227,181,229,182,237,186,247,192,256,199,262,203,266,207,261,206,267,213,270,222,272,232,272,242,269,250,266,247,262,251,266,259,259,265,251,269,242,272,234,272,227,267,227,272,226,271,218,269,209,264,201,257,193,250,188,247,191,247,187,239,182,226,181,214,183,207,186,205,187,208,194,203,188,196,193,189,201,184,211,181,221,181,226" 
    /> 
<div> 
<p id="demo"></p> 
<p id="mi"></p> 
<p id="clicked"></p> 
</div>

источник

2016-03-11 17:47:51

ОК, так же, как и с ванильным javascript. Идея заключалась в том, что mouseover, mouseout и click были областями событий. наложенные изображения возились с стилем: hover. Поэтому я просто переместил фильтры в класс инвертирования и задал класс изображения в событиях области. –

О, это было где-то беспорядочно. Огромное спасибо. Теперь он отлично работает. Есть ли способ, в котором onclick я могу заставить инвертированное изображение остановиться и навести курсор на другие изображения, как раньше? – Karen

Я бы использовал другой класс, когда элемент «щелкнул», что также инвертирует изображение. Затем вы можете переключать класс с помощью .toggleClass («нажата») без каких-либо других параметров (в jQuery), чтобы он включался или выключался. –

z-индекс и инверсия цвета не работают в синхронизации.

ответ

Смежные вопросы