HTML images can be used as links.
To use image as link use image inside hyperlink.
<!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>
Use image map to get different links on different coordinates on image.
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>