Html link on image map

Html link on image map.  Html image may be link by either two ways, i.e 1st, you can link the whole image with one link, or an html image can take more take one link, with different area or regions of an image will have different link. In this post you will be explained both the techniques, but to understand the later one, do read these post : html image multiple link. Here are the techniques:

1. Single Html link on image map

Enclose the image tag by hyperlink tag i.e with ‘<a href>’ tag, similarly as you write in making a text hyperlink. With this the whole image will become clickable
Here is the example to write the syntax:
<a href = “www.example.com” ><img src=”image.png” alt=”image”/></a>

For example here is the code and example of the same :

<html>
<head>
    <title>
    Html link on image map
    </title>
<body>
    <a href="http://www.cprogramto.com">
        <img src="image2.png" alt ="Html link on image map"/>
    </a>
</body>
</html>
html link on image map
html link on image map

2. Multiple Html link on image map

You need to define ‘usemap’ attribute in <img> tag, and then define that map, with different area with different link.

Syntax:
<img src=”imageExample.png” alt=”html link on image” usemap=”#nameOfMap”>

Then define map tag, with different areas and different hyper link.

<map name=”nameOfMap”>
<area href=”” shape=”rect” coords=”0,0,160,160″ alt=”alt tag”>
<area href=”” shape=”circle” coords=”180,100,4″ alt=”alt tag”>
</map>

Here is the example with code for multiple html link on an image:

<html>
<head>
</head>
<body>
<img alt="image" usemap="#mapping" src="image.png">
<map name="mapping">
	<area shape="rect" coords="40,40,180,163" href="http://www.cprogramto.com/c-program-example/">
	<area shape="circle" coords="330,100,77" href="http://www.cprogramto.com/category/java/">
</map>
</body>
</html>

Leave a Reply

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