CODEWITHSUNDEEP
javascripthtmlcssfrontendimagemap
Karen
Karen

Reputation: 113

image map, image should change onhover,

Why is the image not changing on hover? The image should change on hover and onclick and use the same image map

<script>
function changeImage() {

document.getElementById('image').src = document.getElementById('some_id').getAttribute('data-img-src'); 
};

</script>
<html>
<body>
 <img id="image" src="http://imgur.com/SY5h8EC" map="#map" />
<map name="map">
<map id="some_id" data-img-src='http://imgur.com/Sch9YFq'>
<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=" changeImage();"/>
</map>
			  </map> 
 
</body>
  </html>

Upvotes: 0

Views: 79

Answers (1)

Belakorr
Belakorr

Reputation: 130

I changed the image links and wrote the code into a jsFiddle, you also had to change "map" to "usemap" and I got rid of one of the maps, I dont think you need it:

<body>
  <img id="image" src="http://i.imgur.com/SY5h8EC.png" usemap="#map" />
    <map name="map" id="some_id" data-img-src='http://i.imgur.com/Sch9YFq.png'>
      <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" id="area1" onmouseover=" changeImage();" />
    </map>
</body>
<script>
function changeImage() { document.getElementById('image').src=document.getElementById('some_id').getAttribute('data-img-src');
}
</script>

Working Fiddle:

https://jsfiddle.net/3eqb4uuj/

If you need help with something else please comment and I'll edit it

Upvotes: 3

Related Questions