You are currently viewing How to create Image with Link in HTML
  • Post category:HTML

How to create Image with Link in HTML

 HTML code for image with link

I am going to discuss how we can use images as a hyperlink which means how we can create hyper images. So, this article is about HTML code for image with link

If you want to create a link in an image, you should add a <img> tag inside the <a> anchor tag. And you should give your link in <a> tag “href” attribute and give a path to an image in <img> tag “src” attribute.

Image with link

<!DOCTYPE html>
<html>
<head>
<title>image with link</title>
</head>
<body>
<a href="https://wonderdevelop.com"><img " src="mypic.jpg"></a>
</body>
</html>

Output:

html code for image with link

In the above code, to display the image we are going to use the <img> tag then we have to give the source file name with image format in the SRC attribute. Here I give the source filename as “mypic” and image format as “.jpg”. ​​​​​​​If you want to go to another page when you click on the image. Now, when you click on the image, nothing happens. If you move the mouse cursor on the image, the normal mouse cursor is not changed to the hand cursor because we haven’t added the hyperlink to the image.

To create a hyperlink, wrap the image tag between the <a> anchor tag. Then you should give your webpage link in “href” attribute <a> tag. If you move the mouse cursor, you will see the mouse cursor change to a hand cursor, which means our image got convert into the hyperlink. If you click the image, it has moved to the linked page.

Conclusion

This is how you can use an image as a hyperlink to navigate from one page to another page. Sometimes if you want you can put some text also after the <img> tag.

Leave a Reply