How to Create Image Maps in HTML?

Creating Image Links in HTML

Similar to text links, HTML also supports linking an image to a target resource. In most of the practical cases image links are attractive useful than a text links, a simple example is a download image which will  result in more clicks than a text link. The same anchor tag <a> along with an image tag <IMG> is used for this purpose as shown in the below code.

<a href="https://www.webnots.com/" target="_self" >
<img src="https://img.webnots.com/2015/06/header_logo_home_2x.png" alt="WebNots Home"></a>

It will look like below in the browser and clicking on the image will take the user to the home page.

HTML Image Maps

The above example is the simple and easy way of linking a small image to the target URL, but most of the cases the image will be bigger in size and there is a need to connect more than one link with the different sections of the same image. This can be achieved in HTML with image maps feature and clicking on different sections of an image will open different links in a browser.

Following are the two types of image maps possible in HTML:

• Client side image maps
• Server side image maps

We will discuss both topics in detail with example.

Client Side Image Maps

Client side image map uses the “usemap” attribute of <IMG> tag and defined by <map> and <area> tags. Below is a simple image with 500px by 500px having three shapes – a rectangle, a circle and a polygon.

The image can be linked with three different pages on a site and each link is defined by a coordinates within the image. Clicking a particular shape of the image (as defined by the coordinates) will open a new page accordingly as shown below:

The code for the above image should be something like below:

<img src="https://img.webnots.com/2014/01/HTML-Image-Map-Example.png" alt="HTML Image Map" width=500 height=500 border="1" usemap="#imagemap1"/>
<map name="imagemap1">
<area alt="Home" coords="19,36,234,216" shape="rect" href="https://www.webnots.com/" target="_blank" />
<area alt="Blog" coords="363,124,100" shape="circle" href="https://www.webnots.com/webmasters-blog/" target="_blank" />
<area alt="Videos" coords="38,263,205,269,422,249,453,367,394,453,88,456,25,362" shape="poly" href="https://www.webnots.com/demos-and-videos-for-webmasters/" target="_blank" />
</map>

Usemap attribute is used to identify the name of the map along with # tag. And the <map> tag indicates various areas defined within an image. Similarly <area> tag is used to define an area within an image and take one of the following three shapes:

Rectangle

Rectangle is defined with the shape attribute  “rect” and accepts the coordinates in the format “x1,y1,x2,y2” where (x1,y1) are the upper left corner of the rectangle and (x2,y2) are the lower right corner of the rectangle.

Circle

Circle is defined with the shape attribute “circle” and accepts the coordinates in the format “x1,y1,r1” whereas (x1,y1) is the center of the circle and r1 is the radius of the circle.

Polygon

Polygon is defined with the shape attribute “poly” and accepts the coordinates in the format “x1,y1,x2,y2,….,xn,yn” where (x1,y1) indicates the first point of the polygon and (xn,yn) is the last point of the polygon.

Note: Use any of the coordinate’s locator tools available in the web in order to find the exact coordinates of an image. Ensure the uploaded image size is the same as you measured for defining the link areas.

Server Side Image Maps

Server side image map uses “ismap” attribute of the <img> tag to inform the server about the document to be delivered when a user clicks on the particular coordinates of the image. The coordinate starts with the upper left corner of the image with (0,0) and a question mark is added with the URL. For example, if you want to create a link when a user clicks on the coordinates (40,40) on the image, the following code can be used.

<a href="/apps/search?q=html" target="_blank" >
<img ismap src="Home.png" 
        alt="Image Maps" border="1"/>
</a>

This will trigger a request /apps/search?q=html?40,40 to the server and the configuration needs to be done at server side to process this script and deliver the required document.

---