HTML Hyper Link with Image

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="http://www.ontimeitsolution.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:

  • 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.
  • 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="http://www.ontimeitsolution.com/"> <img src="image_name.jpg"> </a>

Target       Description
_blank      Open the link document in ew tab
_self          Default for same frame/tab
_parent    Open the link document in parent frame
_top          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.

Coding Tag

Coding Tag always happy to serve you in Information Technology (IT). Learn HTML, CSS, Javascript, PHP, Android, Digital Marketing, Latest IT News and many more.

Leave a Reply

avatar
  Subscribe  
Notify of