How to use an image as a hyperlink in HTML ?

In our previous post, we shown you how you can set an hyperlink for the text, in this post we will demonstrate with simple html code, how you can set an hyperlink to the image, so once you click at anywhere on image, the website link will be opened.

<!DOCTYPE html>
<html>
<body>

<a href="https://www.greenecosystem.in/fconn/">
<img src="http://3.bp.blogspot.com/-JJLuxTEVUCA/U_SfyDwAxaI/AAAAAAAAAck/aTZNhU_MOgM/s1600/tomato-banner-updated.png"/></a>

</body>
</html>

As you can see in above HTML code, we used “a href” tag in same way as text links, but inside this tag, instead of text, we have used one mote html tag “img” and set the source of this image tag to the URL where you have uploaded the image.

With Above code, you can set an hyperlink as below,

now, if you click anywhere on above image, you can see the website link opened.

Same way, you can use ‘ target=_blank ‘ if you want to open the URL in new tab.

Google Sheets Import Data - Import ... x
Google Sheets Import Data - Import from multiple spreadsheets to one range

Leave a Comment

Sign up to our newsletter!

ADB Commands Android Android Applications Android Build system Application Libraries Application Stack / User Interface Bash / Shell Scripts Bluetooth driver Cloud Technologies Commands and Packages Compilation Content Management System Core Kernel C Programs Development, Debugging and Performance Tools Development and Build Development Environment Setup Django & REST Api Errors & Failures Git Hardware Platforms HTML JAVA Programs Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Multimedia NDK / Middleware / HAL Operating System Concepts PHP Programming Languages Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Source Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized Web Design and Development Website Hosting Wordpress Yocto Embedded Linux