HTML Hyper Link with Image

In the previous lesson, we have seen what the hypertext link is and how we using this with the text. Now, see how to use images in our web pages. Here, we will learn how to use images to make hyperlinks.

It's very easy to use an image as a hyperlink. We just use an image inside the hyperlink in the place of text as shown below:

Use the below code for a hyperlink from one page to another page through the image.

<a href="http://www.codingtag.com/"> <img src="image_name.jpg"> </a>

This is the easiest way of generating hyperlinks using the images. In this way, we will see how we can make Mouse-Sensitive Image Links.

Mouse-Sensitive Images

The HTML and XHTML provide an innovative feature that allows you to embed several different links inside a single figure. You can make various links on the sole image based on the diverse coordinates available on the image.

Once different links connect to different locations, then users can click on various parts of the image to open the target documents. Such mouse-sensitive images are called as image maps.

There are two ways to make image maps:

a) Server-side image maps - This is allowed by the is map feature of the <img> tag and needs access to a server and relevant image-map processing the applications.

b) Client-side image maps - This is made with the use map feature of the <img> tag, along with consequent <area> and <map> tags.

When you click on HTML Links image, then the page will be redirected on another page, on the same tab, but if you want to open the same URL on another tab then use below code:

<a href="https://www.codingtag.com/"> <img src="image_name.jpg"> </a>

HTML Image Syntax

<img src="image_name.jpg">

For still image use .jpg, .png format, and if you want to use an animated image then you have to use .gif format image.