HTML Image Map

In this tutorial we will learn to create image map in HTML.

What is an image map?

An image map is an image with some defined shapes that are linked to some web pages. So, when we click on the shape drawn on the image we are taken to some website page.

Example

In this tutorial we will be using the dyclassroom logo image. Feel free to use any other image of your choice. But remember you may have to change the co-ordinates of the shapes drawn.

Step 1: Set the dimension of the image

The original dimension of the given image is 311x48 (width x height) in pixels.

But to draw the image map we are going to fix the image size to 200x30 (width x height) in pixels.

Image: 200x30

HTML

<img
  src="https://storage.googleapis.com/dycr-web/image/dyclassroom-logo-black-311x48.png"
  alt="dyclassroom logo"
  width=200
  height=30>

Note! If the dimension of the image is changed then the co-ordinates of the shape will also change.

Step 2: Add the usemap attribute

Now we have to add the usemap attribute to the img tag and assign it a value that will point at the map.

For this example we will set the usemap attribute value to #logo_map.

<img
  src="https://storage.googleapis.com/dycr-web/image/dyclassroom-logo-black-311x48.png"
  alt="dyclassroom logo"
  width=200
  height=30
  usemap="#logo_map">

Step 3: Creating the map element

We will now create the map element and set its name attribute to logo_map like the following.

<map name="logo_map">
</map>

So, the usemap attribute in the img is now tied with this map element having name attribute logo_map.

Step 4: Define the shape using area element

For this example we will draw a rectangular shape over the DY logo. The width of the rectangle is 24 pixels and height is 30 pixels.

And to draw this rectangular area we will use the area element like the following.

<area shape="rect" coords="0,0,24,20" href="https://dyclassroom.com" alt="dyclassroom">

Final code

So, our final HTML code will look like the following.

<img
  src="https://storage.googleapis.com/dycr-web/image/dyclassroom-logo-black-311x48.png"
  alt="dyclassroom logo"
  width=200
  height=30
  usemap="#logo_map">

<map name="logo_map">
  <area shape="rect" coords="0,0,24,30" href="https://dyclassroom.com" alt="dyclassroom">
</map>

Output:

So, if you hover the mouse over the DY logo you will see it change and when you click on that area it will take you to the home page of dyclassroom website.