- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use an image as a link in HTML?
We can add image as a link and other HTML elements as a link. A link is a connection from one Web page to another web page.
We can add page links to a web page. HTML links are hyperlinks. The <a> tag defines a hyperlink and used to link from one page to another. The href attribute is used with the <a> tag, which indicates the link's destination.
To make page links in an HTML page, use the <a> and </a> tags, with href attribute used to define the links. We should use the <a>…</a> tags inside <body>…</body> tags.
Syntax
Following is the syntax to add image as a link on the web page.
<a href="link address"><img src="image destination"></a>
Example
Following is the example program to make image as a link.
<!DOCTYPE html> <html> <body> <p><a href="https://www.Youtube.com/"><img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p> </body> </html>
Following is the output for the image as a link, clicking on the image will navigate us to google home page.
Example
Following is the example program to make image as a link.
<!DOCTYPE html> <html> <body> <center> <h2>Image as a Link</h2> <a href="https://www.tutorialspoint.com"><img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;"></a> </center> </body> </html>
Following is the output for the image as a link, clicking on the image will navigate us to destination webpage.
Example
Following is another example program to make image as a link.
<!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head> <body> The following image works as a link:<br> <a href="https://www.qries.com/"> <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width=150" height="70"> </a> </body> </html>
After clicking on the image, it will redirect to the destination webpage.
342K+ Views
