HTML | Mapping Image

What is image mapping :
In image mapping an image is specified with certain set of coordinates inside the image which act as hyperlink areas to different destinations. It is different from an image link since in image linking, an image can be used to serve a single link or destination whereas in a mapped image, different coordinates of the image can serve different links or destinations.

Elements required in Mapping an Image :

There are three basic html elements which are required for creating a mapped image.

  1. Map : It is used to create a map of the image with clickable areas.
  2. Image : It is used for the image source on which mapping is done.
  3. Area : It is used within the map for defining clickable areas.

Steps to create a mapped image :

  • Determining Image size :
    Determining the size of the image is very important because if the size of the image is changed then the area coordinates will also require updation.
  • Creating a map for overlaying the image :
  • Determine the coordinates of the areas that you want to map :
    It can be done in three shapes which are rectangle, circle and polygon. Coordinates can be found easily by using MS-Paint.

Put all the above steps together as done in the code below.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<h3>Mapping an Image
  
<body>
  
<p>Click on the different continents of the map to know about them.</p>
  
<img src="world-map-151576_960_720.png" width="960" height="492"
                                alt="World Map" usemap="#worldmap">
  
<map name="worldmap">
<area shape="rect" coords="184, 36, 272, 158" alt="north america"
                href="https://en.wikipedia.org/wiki/North_America">
  
<area shape="rect" coords="282, 215, 354, 367" alt="south america" 
                href="https://en.wikipedia.org/wiki/South_America">
  
<area shape="rect" coords="506, 151, 570, 333" alt="africa"
                href="https://en.wikipedia.org/wiki/Africa">
  
<area shape="rect" coords="618, 42, 791, 162" alt="asia"
                href="https://en.wikipedia.org/wiki/Asia">
  
<area shape="rect" coords="509, 44, 593, 110" alt="europe"
               href="https://en.wikipedia.org/wiki/Europe">
  
<area shape="rect" coords="786, 288, 862, 341" alt="australia" 
              href="https://en.wikipedia.org/wiki/Australia_(continent)">
  
<area shape="rect" coords="249, 463, 760, 488" alt="antartica"
              href="https://en.wikipedia.org/wiki/Antarctica"
</map>
  
</body>
</html>

chevron_right


Output :

Image source : https://www.pixabay.com/photo/2013/07/12/16/57/world-map-151576_960_720.png



My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.