Search code examples
htmlimagemap

Image areas not turning into clickable area in Image Map

I am trying to create an HTML image map like the following( Please find my code below):

h1 {
  background-color: red;
}
 <h1> This is Frame A </h1>


<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="450,208" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
  <area shape="circle" coords="305,124" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
  <area shape="circle" coords="652,122" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>

The image is getting displayed on the webpage, however, the Sun, Earth and Venus are not getting turned into clickable things so that I can direct it to their respective images. Please let me know what I am doing wrong? Am I specifying the coordinates properly?

I used the following Image Generator to find out the coordinates :

Solution

  • This is because the coords takes three items and not 2: x,y,radius. So you need to add values for the radius (here is an example):

    h1 {
  background-color: red;
}
     <h1> This is Frame A </h1>


<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
  <area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
  <area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>

    Note: Since you defined the width and height of the image as width="500" height="300", you will need to change the x,y coordinates to adjust for that. This is why I changed them in my answer.