Image Map in HTML

Image Map in HTML

Image Map in HTML is a very interesting and useful topic for web designers. It requires a little bit of knowledge of math to find the coordinates and radius of a circle. In Image Map, there are three shapes which are rectangle, circle, and polygon.

Image Map is used to give hyperlinks on different parts of an image, for example, a single image in which there are laptop, coffee, and notebook and you want to link laptop to a particular link, coffee to coffee-related hyperlink and notebook to notebook related hyperlink then image map is useful for you.  


What is Image Map?

Image Map is used to map or give a hyperlink to a particular area of an image.

Image Map has 3 shapes to map an image:

  1. rectangle
  2. circle
  3. polygon


How to Use Image Map?

To use Image Map there are three elements, which are following:

  1. Map: It is used to map an image with clickable areas.
  2. Image: It is the image where you will do the mapping.
  3. Area:  Area is the place on an image where you want to give a hyperlink.


Steps to create an Image Map:


1. Determine Image Size:

First, you have to determine your image size because you will find coordinates according to image size, if you change image size then you will have to update coordinates too.


2. Find Coordinates of an image area

Find the coordinates of an image area, where you want to give a hyperlink.


If you use a rectangle shape then you have to find the following values:

  1. First corner values from left and top of an image area where you want to give hyperlink.
  2. Third corner values form left and top of an image area where you want to give hyperlink.



If you use a circle shape then you have to find the following values:

  1. Center distance of an image from left and top.
  2. Find the radius of the circle.



To find the coordinates of an image you can use Photoshop or paint software.


Example:

<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
<div class="box">
<img src="image-map-in-html.jpg" usemap="#workmap" width="1000" height="667">
<map name="workmap">
 
<area shape="rect" coords="300,103,710,545" alt="Computer" href="https://www.apple.com/in/macbook-pro/" target="_blank">
 
<area shape="rect" coords="720,337,800,434" alt="Phone" href="https://www.apple.com/in/shop/buy-iphone/iphone-13" target="_blank">
 
<area shape="circle" coords="854,445,44" alt="Coffee" href="https://www.cafecoffeeday.com/cafe-menu/whats-new" target="_blank">
 
<area shape="rect" coords="0,382,255,500" alt="notebook" href="https://www.cafecoffeeday.com/cafe-menu/whats-new" target="_blank">
 
</map>
</div>
 
</body>
</html>
 


Image Sample: