I have broken an image down into parts to use for navigation.I have placed these images with z-index on each other.So the image looks like one whole image. I am using image map. I want images to invert color when mouse is hovered over them. So when mouse is on a particular area i change the z-index of that area and bring that area up and then apply color invert css to that image. When i click on an image only that part should get black and when i hover over other images the mousein mouseout options should work. When i click on another image the previous image which was clicked should become white again n this current image should remain black. Right now whats happening is previous images also remain inverted color(black) and the current image also becomes black. Here is my code for the same

```js
$(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('pressed')
            .css('z-index',2);
    });
});

function Prev()
{
$('.pressed').removeClass('pressed');

$('#'+imgid)
    .toggleClass('pressed')
    .css('z-index',2);

}
```

```css
#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%);
}

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

```html
<body>

 <map name="map" id="id_1">
 <div="container">
<img   id="02"  src="http://i.imgur.com/fpqmClk.png" style='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>
</div>
<div id = "mapButtons" >
<button class = "prevButton" type="button" onclick="change_BASE_ID(curr_base_id,this.className)"><img id="image" src="prevButton.png"></button>

<button class = "nextButton" type="button" onclick="change_BASE_ID(curr_base_id,this.className)"><img id="image" src="nextButton.png"></button>
</div> 
</body>
```