How to insert link in part of image

We can add link on whole picture by using anchor tag but if we have a big picture with several buttons and we need different links on all buttons then it is not possible to insert link by using anchor tag.

Generally people divide the image in different parts is not a best solution for this problem.

You can do it by using html image map feature. This is simple and smart solution for this problem.


<img src="imagepath" usemap="#demoexample" slt="image map example">
<map name="demoexample ">
<area shape="rect" coords="x1,y1,x2,y2"  href="#" alt="rect">
<area shape="circle" coords="x,y,radius"  href="#" alt="circle">
<area shape="polygon" coords="x1,y1,x2,y2,..,xn,yn"  href="#" alt="poly">

You can define three different shapes in area attribute of image map
1. Rect : you need two different co-ordinates. Top right and bottom left.
x1,y1,x2,y2 indicates left, top, right, bottom corner of the rectangle

2. circle : you need centre co-ordinate and radius size for circle.
x,y,radius indicates cenre and radius co-ordinates

3. Polygon : If you want link in your image and you cannot use above area(rect & circle) then you can use this custom area attributes in your map.
x1,y1,x2,y2,..,xn,yn indicates your custom area of image.

Here I have defined mapname because sometimes we use map for multiple image so it will identify which image goes with which map.

One thought on “How to insert link in part of image

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>