How to Create Image Maps in HTML ?

by

Creating image link in HTML, Learn how to give multiple links in single image in HTML

Suppose, You want to give a clickable link to specific part of a image that can be possible by <map> tag of HTML.You can also target multiple clickable links to a particular are of the image.so here you need to use some tags such as <map>, <area>, <a> and <img> tags in html.

Example

<img src="https://ravindra24.com/wp-content/uploads/2022/02/imagemap.jpg" alt="Image Map Example" width=500 height=500 usemap="#map1"/>
<map name="map1">

            <area alt="Home" coords="19,36,234,216" shape="rect" href="https://ravindra24.com/" target="_blank" />
            <area alt="Blog" coords="363,124,100" shape="circle" href="https://ravindra24.com/" target="_blank" />
            <area alt="Videos" coords="38,263,205,269,422,249,453,367,394,453,88,456,25,362" shape="poly" href="https://ravindra24.com/" target="_blank" />

</map>

Output

 

<map> is used define the image map and<img> tag uses a attribute called usemap that is used to identify the name of map.<map> tag also have attribute called name that is used to define an identity of map and it must be match with usemap value. Similarly <area> tag is used define the area to be located within image. There is an attribute called shape and it has following values:

rect

This is used to display rectangle shape. This “rect” value accepts the coordinates in (x1,y1,x2,y2) format where x1,y1 represent the upper left corner and x2,y2 represent bottom right corner of the rectangle.

circle

Home Blog Videos

This is used to display a circle shape that accept the coordinates in (x1,y1,r1) format where (x1,y1) is used to represent the center of the circle and r1 is used to represent the radius of the circle.

poly

This is used to display a polygon shape that accept coordinates in (x1,y1,x2,y2,….,xn,yn) format where (x1,y1) represent the first point and xn,yn represent the last point of polygon.

Leave a Comment