HTML Hyper Link with Image

by Yogesh Khanna 14-Jun-16

0 1528

In the previous lesson, we have seen what 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 hyperlink from one page to another page through image.

<a href=""> <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 page will be redirect on another page, on same tab, but if you want to open same url on another tab then use below code:

<a href=""> <img src="image_name.jpg"> </a>

Open the link document in ew tab
Default for same frame/tab
Open the link document in parent frame
Open the link document in full body of window

HTML Image Syntax
<img src="image_name.jpg">

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


Discount Coupons

Leave a Reply

    Waiting for your comments