HTML Image Links

HTML images can be used as links.

To use image as link use image inside hyperlink.

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<a href="https://www.tutorialsright.com" target="_self"> 
   <img src="/images/html/flower.jpg" alt="Tutorials Right" border="0"/> 
</a>
</body>
</html>

HTML Image <map> tag

Use image map to get different links on different coordinates on image.

Client-Side Image Maps

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding links.

The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of each clickable hotspot available on the image. Here's an example from the image map:

<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src="/images/html/flower.jpg" alt="HTML Map" border="1" usemap="#html"/>
<!-- Create  Mappings -->
<map name="html">
   <area shape="circle" 
   coords="80,80,20" href="/css/index.htm" alt="CSS Link" target="_self" />
   <area shape="rect" 
   coords="5,5,40,40" alt="jQuery Link" href="/jquery/index.htm" target="_self" />
</map>
</body>
</html>

Result

Previous Next