Image Link in HTML

It is very simple to make an image link. Let us have a look at an example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a class="native-style-link" href="https://www.learnperday.com">
            <img src="/assetsfiles/img/html/basic/home-banner-1.jpg" width="100" height="100" />
        </a>
    </body>
</html>
                        

In the above code, an image is working as a link. When you click on an image, the link will be opened. Will it be opened in new tab ( or window ) or in same tag, it depends on the target attribute.

Image Map

What if you want to map two links in a single image? Like when you click on the left part, it will open one link and when you click on right part it will open another.
Then Image map comes into the picture. Image maps are not popular these days but it comes handy in some specific applications. Let us start with an example.

Example of Image Map

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img usemap="#technologies" src="/assetsfiles/img/html/basic/imagemap.png"/>
        <map name="technologies">
            <area shape="rect" coords="0,0,100,100" href="https://www.learnperday.com/html/htmlintro.php">
            <area shape="rect" coords="100,0,200,100" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">
            <area shape="rect" coords="200,0,300,100" href="https://www.learnperday.com/javascript/jsintro.php">
        </map>
    </body>
</html>
                        

As you can see from the above example, an image map is made by two elements:

  • <map>
  • <area>

We will see both one by one.

<map> element

<map> creates the clickable areas on the particular image.
<img> element will have usemap attribute which value will be the name of the value.
So name attribute of the <map> element is must. Refere the above example for more details.
<map> will have one or multiple <area> elements which will define the clickable parts in image.

<area> element

<area> element defines the clickable areas.
There are 3 attributes of <area>:

  • shape

    shape defines the shape of the area. It can be circle, rect or poly.

  • coords

    coords defines the coordinates of the points of the area.

  • href

    href is the link to which <area> is pointing.

Value of coords attribute depends on the value of shape attribute. It is shown in below table.
Before starting, remember that top left corner of the image has coordinates (0,0) and bottom right corner of the image has (width, height).

shape coord Description
rect x1,y1,x2,y2 (x1,y1) are the upper left coordinates and (x2,y2) is the bottom right coordinates.
circle x,y,r (x,y) are the coordinates of the center of the circle and r is the radius of the circle.
poly x1,y1,x2,y2,x3,y3,...,xn,yn (x1,y1),(x2,y2)..(xn,yn) are the coordinates. (x1,y1) connects to (x2,y2), (x2,y2) connects to (x3,y3) and so on. (xn,yn) the last point connects to (x1,y1) the first point. Remember, all the connections are done via straight invisible line.

Explanation

Now let us try understanding the given example. Please have a look at the following image.

Example of Image Map
Image with coordinates

Above image is the same image we have used in the example but with coordinates written on it.
The top left cornor of the image is (0,0). Now width of the image is 300px and height of the image is 100px. So bottom right cornor is (300,100).
Now in the example, we have devided the image in 3 parts for 3 links. So for HTML, points (0,0) and (100,100) will create a rect area. Same way for CSS, points (100,0) and (200,100) will create another rect area and for JS, points (200,0) and (300,100) will create another rect area.
That is how each area is created and each will have a separate link for that area.

The same way, you can create circle area by defining the center point(x,y) and its radius. And same way for the poly shape.

Conclusion

In this section, we have learned about the image maps. It is not widely used but in some applications, it is very useful.
In next section, we will learn about mail links in HTML.