HTML Hyperlink with Image | Create Hyperlink Image
×

HTML Hyper Link with Image

2 1982

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>
Target
Description
_blank
Open the link document in ew tab
_self
The default for same frame/tab
_parent
Open the link document in the parent frame
_top
Open the link document in the full body of the window

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.



Share:


Discount Coupons



Leave a Reply


Comments
  1. Dheeraj Kushwah Apr 29, 2020

    Hi, sir this side Dheeraj kushwah from MP. My whats app no. Is 9300316570. Sir apke bare me mujhe what's app group piki templates se pata chal Sir me MLM software banana Chahta hu Usske liye apki help chahiye Apki fees dene ke liye ready hu sir Reply jaroor kijiyega sir

    Admin Apr 29, 2020

    Sure Dheeraj, Kindly share your requirement.