HTML Image Maps Tutorial
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 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 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 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.
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.