Image Maps in HTML with Examples

In this article, I am going to discuss Image Maps in HTML with Examples. Please read our previous article where we discussed Picture Element in HTML with Examples. At the end of this article, you will learn everything about HTML Image Maps with Examples.

HTML Image Maps

We can use HTML image maps to make clickable areas on images. An image map comprises a picture with clickable areas, where you can click on the image and it will open to a new or already specified location.

The <map> tag can include many <area> elements that define the coordinates and type of the area. You can simply link any area of a picture to other pages using the <map> tag without dividing the image.

Image Map in HTML

The HTML <map> tag defines an image map. An image map is just an image with some clickable areas. The clickable areas are marked with one or more <area> tags depending on the requirement.

The idea behind an image map is that you should be able to do different activities based on where you click in the image. To make an image map, you’ll need an image and some HTML code that specifies the clickable locations.

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted in Html document using the <img> tag. The only difference from other images is that it contains a usemap attribute inside the <img> element.

<img src=”https://cdn.pixabay.com/photo/2017/05/11/11/15/workplace-2303851_960_720.jpg” alt=”Desk” usemap=”#deskmap” width=”500″ height=”380″>

The usemap attribute value starts with a hashtag # followed by the name of the image map. The usemap attribute is used to create a connection between the image and the image map. We can use any image as an image map by using the usemap attribute inside the image element.

Create Image Map

Image map is created using a <map> element. The <map> element is used to generate an image map and is linked to the image by using the name attribute.

<map name=”deskmap”>

The name attribute must have the identical value as the images usemap attribute then only it will work.

The Areas

After creating the map element we need to create clickable areas. A clickable area is marked using an <area> element.

<area shape=”rect” coords=”175,242,420,358″ alt=”Keyboard” target=”_blank” href=”https://en.wikipedia.org/wiki/Computer_keyboard“>

The area can be a rectangle, circle, polygon, or a whole region; we can select any of them depending on our requirements. Within the area element, we must define the shape we are using as well as the coordinates of the area we want to make clickable.

HTML Image Maps Example

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>

<img src="https://cdn.pixabay.com/photo/2017/05/11/11/15/workplace-2303851_960_720.jpg" alt="Desk" usemap="#deskmap" width="500" height="380">

<map name="deskmap">

  <area shape="rect" coords="175,242,420,358" alt="Keyboard" target="_blank"
  href="https://en.wikipedia.org/wiki/Computer_keyboard">
  
  <area shape="rect" coords="444,251,481,357" alt="Mouse" target="_blank" href="https://en.wikipedia.org/wiki/Computer_mouse">
  
  <area shape="rect" coords="375,14,481,357" alt="Diary" target="_blank" href="https://en.wikipedia.org/wiki/Book">

</map>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Run the above code in your code editor and try to click on keyboard, mouse, and diary. It will redirect you to different web pages based on which object you have clicked.

Here, in this article, I try to explain Image Maps in HTML with Examples and I hope you enjoy this HTML Image Maps with Examples article.