image change on click using imagemap

Question

I'm trying to use one image map multiple times. The idea is that you've got an picture with image map. You click on one area (there's a highlight on the image map), you press one and and the picture is changed. The new picture is using the same image map as the original one (only the colors change in the image). I am trying to do exactly same thing as this link).

<script>
    function changeImage() {
        //var temp = document.getElementById('area1');
        image1.src="ch01ch12.png";
    }
</script>

<html>
<body>
<img src="http://imgur.com/SY5h8EC" class="map" width="453" id="image1" height="453" usemap="#map">
    <map name="map">
        <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
             onmouseover="document.getElementById('image1').src='http://imgur.com/Sch9YFq'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'" 
    onclick="changeImage();"/>
  <area 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" alt="chap11" width="453" height="453"
             onmouseover="document.getElementById('image1').src='http://imgur.com/yJZSKPe'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/> 
  <area shape="poly" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283,208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,265,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" alt="chap10" width="453" height="453"
             onmouseover="document.getElementById('image1').src='http://imgur.com/JWK9nSo'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/>   
  <area 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" alt="chap9" width="453" height="453"
             onmouseover="document.getElementById('image1').src='http://imgur.com/9PXeIMo'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/>  
  <area 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" alt="chap8" width="453" height="453"
             onmouseover="document.getElementById('image1').src='http://imgur.com/MCz7mgn'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/>  
  <area 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" alt="chap7" width="453" height="453"
             onmouseover="document.getElementById('image1').src='http://imgur.com/d5Clqz5'" 
             onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/> 
 </map>
 </body>
  </html>

<script type="text/javascript" src="jquery.maphilight.js"></script>

<script type="text/javascript">$(function() {
        $('.map').maphilight();
    });</script>
 <script type="text/javascript src="src="http://code.jquery.com/jquery-latest.js"></script>
 
<script>
  $(document).ready(function () {
    $('#area1').click(function () {
        $("#image1").show();
    });
 
});
$(function() {
$('#area1').click(function(){
   $("#image1").attr('src',"ch01ch12.png");
   $("#image1").parent().css('background-image',"url(ch01ch12.png)");
   return false;
 });
   </script>


 <script>
    function changeImage() {
        var temp = document.getElementById('image1');
        temp.src="ch01ch12.png";
    }
</script>

<html>
<body>
<img src="ch01ch01.png" class="map" width="453" id="image1" height="453" usemap="#map">
    <map name="map">
        <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
             onmouseover="document.getElementById('image1').src='ch01ch12.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'" 
    onclick="changeImage()"/>
  <area 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" alt="chap11" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch11.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area shape="poly" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283,208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,265,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" alt="chap10" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch10.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>   
  <area 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" alt="chap9" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch09.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>  
  <area 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" alt="chap8" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch08.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>  
  <area 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" alt="chap7" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch07.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap6" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch06.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap5" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch05.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap5" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch05.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap5" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch05.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap5" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch05.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
  <area 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" alt="chap5" width="453" height="453"
             onmouseover="document.getElementById('image1').src='ch01ch05.png'" 
             onmouseout="document.getElementById('image1').src='ch01ch01.png'"/> 
    
 </map>
 

</body>
</html>

<html>
<body>
<img src="C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png" class="map" width="453" id="image1" height="453" usemap="#map">
<map name="map">
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
         onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch12.png'" 
         onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'" 
href="javascript:function(1)"/>
<area 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" alt="chap11" width="453" height="453"
         onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch11.png'" 
         onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
<area shape="poly" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283,208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,265,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" alt="chap10" width="453" height="453"
         onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch10.png'" 
         onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
</map>
</body>
</html>

$(document).ready(function () { $('#area1').click(function () { $("#image1").show(); }); $(function() { $('#area1').click(function(){ $("#image1").attr('src',"ch01ch12.png");`` $("#image1").parent().css('background-image',"url(ch01ch12.png)"); return false; });

Please post JavaScript/jQuery, CSS, and HTML that would be relevant to your question. Create a demo using any or all of the following services: [jsFiddle.net](https://jsfiddle.net/), [CodePen.io](https://codepen.io/), [Plunker.co](http://plnkr.co/), [JS Bin](https://jsbin.com/) or a snippet (7th icon located on the text editor toolbar or CTRL+M). Make sure you also include the actual images that you are using, how else would we test an image map without the real image? — zer00ne, Feb 23 '16 at 08:29
Thank you for helping me how to add code. I still dont know how to add the required images — Karen, Feb 23 '16 at 20:01
@Mitali you should upload each image to imgur.com or some other image hosting site. Then use the url (ex. `http://imgur.com/path/to/img.png`) instead of the directory paths you have in the code. — zer00ne, Feb 23 '16 at 20:07
I am trying to set the image onclick and use the same image map for the new image. — Karen, Feb 23 '16 at 20:07
I want to try sumthing like this. ... some-id.onhover = function() { image.src = some-id.getAttribute('data-img-src'); }; — Karen, Feb 24 '16 at 18:20
Karen I'm struggling with the same problem rn, did you find some working solution?) — Prokrastinosaurus, Feb 27 '23 at 17:53

image change on click using imagemap

0 Answers0