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
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.
As you can see from the above example, an image map is made by two elements:
We will see both one by one.
<map> creates the clickable areas on the particular image.
<img> element will have
usemap attribute which value will be the
name of the value.
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 defines the clickable areas.
There are 3 attributes of
shapedefines the shape of the area. It can be circle, rect or poly.
coordsdefines the coordinates of the points of the area.
hrefis the link to which
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).
|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.|
Now let us try understanding the given example. Please have a look at the following image.
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.
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.