HTML
In this tutorial we will learn to create image map in HTML.
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.
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.
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
<img src="/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.
usemap
Now we have to add the usemap attribute to the img tag and assign it a value that will point at the map.
img
For this example we will set the usemap attribute value to #logo_map.
#logo_map
<img src="/image/dyclassroom-logo-black-311x48.png" alt="dyclassroom logo" width=200 height=30 usemap="#logo_map">
map
We will now create the map element and set its name attribute to logo_map like the following.
name
logo_map
<map name="logo_map"> </map>
So, the usemap attribute in the img is now tied with this map element having name attribute logo_map.
area
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://www.dyclassroom.com" alt="dyclassroom">
So, our final HTML code will look like the following.
<img src="/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://www.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.