Image map in HTML | Map tag

HTML tutorials

Image map in HTML example

How to map links on an image in HTML?

map tag in html

In HTML we can define an image map. HTML(Hypertext Markup Language) provides a way to map images using the map tag <map>. Image map helps you to declare parts of an image as links. The areas can be defined as circles, ractangles and polygons. See the example below to understand more.

HTML code example for Map tag

<!DOCTYPE html>

<html lang=’en’>

<head>

<meta charset=”UTF-8″ />

<title>

Image Map in HTML | How Map Tag is Used

</title>

</head>

<body>

<img src=”images/my_pic.png” width=”240″ height=”240″

alt=”Alternate for my pic” TITLE=”my pic”

usemap=”#my_pic_map” />

<map name=”my_pic_map “>

<area shape=”rect” coords=”0, 0, 60, 60″ alt=”rect” title=”rectangular area” href=”rectangle.html” />

<area shape=”circle” coords=”160, 27, 27″ alt=”circle” title=”circular area” href=”circle.html” />

<area shape=”poly”

coords=”13, 93, 101, 113, 148, 106, 195, 88, 243, 112, 221, 129,

130, 134, 181, 163, 201, 157, 193, 212, 173, 208, 149, 182, 99,

137, 5, 131, 68, 121″

alt=”poly” title=”poly area for my pic” href=”myPage.html” />

</map>

</body>

</html>

The code shows that we are displaying an image using the image <img> tag on the page. You can see that the image tag is having some attributes like src, width, height and usemap attribute as well. The usemap attribute has a value with hash sign in the start. It actually defines the name of the map we will be going to create for this image. In the next line we have the map tag with name as we specified in the image tag.

Next three lines of code are defining the areas of the image using the area <area> tag. In this area tag you can define that what shape you are going to use on the image to map it. This can be done with the help of shape attribute of the area tag. You can create shapes like rectangle, circle or a polygon. Then you have to set the coordinates of the shape with coords attribute. In the href attribute you can write the name of the page where the user will go after clicking on this area.

Comments