Logo - ProgrammingHead

How to add link in image in HTML [Image Links]

If you are wondering about How to add link in image in HTML, then we have solutions for that in this Tutorial.
In simple way, you just need to Wrap your Image inside anchor tags.
Where anchor tags will make that image Clickable and you can Assign any web Link to that Image Easily.

How to add link in image in HTML [Image Links]

What is an Anchor Tag in HTML?

Anchor tags <a> are used for adding Hyper Links in HTML Web Pages.
Whatever you write or Define Between Anchor tag's Starting <a> and Closing </a> tags will become a Clickable Link.
Where by using Anchor tag's href=" " you can assign a Link where you want link that Text/HTML Element.

index.html

<a href="page2.html">
  Click me
</a>

Results

Add Link in Image [by Using Anchor Tags]

To add a links in images using Anchor Tags, you just need to Declare/Write your Image tag inside HTML Anchor Tag's Starting <a> and Closing </a> tags and you are DONE.

index.html

<a href="page2.html">
  <img src="myImage.jpg"/>
</a>

Results

Related Topics: How to add link in image in HTML [Image Links]

Click on Titles below to reveal the Data

How to open Link in New Tab

In order to Open Links in New Tab, Current Tab, Parent Frame, New Window and in a Particular Frame, we have Anchor Tag's target=" " Attribute.
We just need to specify how we want to open your Link.
For example, If you want to open your Link in a New Tab: use target="_blank".

index.html [Open link in NEW Tab]

<a href="https://programminghead.com" target="_blank">
  <img src="myImage.jpg"/>
</a>

Results

How to open Link in Current Tab

If you want to Open your Link in the Current Tab, then use target="_self".

index.html [Open link in CURRENT Tab]

<a href="https://programminghead.com" target="_self">
  <img src="myImage.jpg"/>
</a>

Results

How to open Link in Parent Tab

If you want to Open your Link in the Parent Tab, then use target="_parent".

index.html [Open link in PARENT Tab]

<a href="https://programminghead.com" target="_parent">
  <img src="myImage.jpg"/>
</a>

Results

How to open Link in a NEW BROWSER Window

If you want to Open your Link in a New Browser Window, then use
onClick="window.open('https://programminghead.com', '_blank', 'width=800, height=800')".
Here we need to fire a onClick JavaScript Event. Using JavaScript we can Open new Browser Window on a Click.

index.html [Open link in a NEW BROWSER Window]

<a onClick="window.open('https://programminghead.com', '_blank', 'width=800,height=800')">
  <img src="myImage.jpg"/>
</a>

How to open Link in a FRAME

If you want to Open your Link in a Particular Frame, then use target="frameName" (replace frameName with your HTML Frame Name).

index.html [Open link in a FRAME]

<a href="https://programminghead.com" target="frameName">
  <img src="myImage.jpg"/>
</a>

Clickable text or images that take you to different sites

To make HTML Elements like: HTML text or HTML Images Clickable, we need to Wrap them inside HTML Anchor tag's Starting <a> and Closing </a> tags.
This will make both the TEXT and Image a Clickable text or Image.

index.html

<a href="https://programminghead.com">
  Click Me
</a>

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

Results

How to make image clickable in HTML

Anchor Tags are perfect Option to make HTML Elements like: Image Clickable in HTML. You just need to put your Image Tag between HTML Anchor tag's Starting <a> and Closing </a> tags and i will become a Clickable Image.

index.html

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

Results