In this post, we are going to learn how to make an image clickable in HTML. You’ve got to use images if you want to make your webpage visually appealing and more engaging. Sometimes you will want to redirect the user to another page within your site or to a page on another site when the user clicks on an image. You can achieve this by making images on your webpage clickable. But, how do you make an image clickable?
To make an image clickable we utilize <a> and <img> tag of HTML. We wrap a <img> tag within a <a> tag. Let’s see this with an example.
<a href="https://en.wikipedia.org/wiki/HTML">
<img alt="HTML" src="images/HTML.png" width="200" height="200">
</a>
Here, I have used an HTML logo image and when someone clicks on that image, a Wikipedia page about HTML opens up.
Let’s see another example of linking page within our own site.
<a href="androidInfo.html">
<img alt="HTML" src="images/Android.png" width="200" height="200">
</a>
Here, I have used the android logo image and when someone clicks on that, a new page within this site opens up.
Now, let me show you the complete code of this simple two page site.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Clickable image</title>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/HTML">
<img alt="HTML" src="images/HTML.png" width="200" height="200">
</a>
<a href="androidInfo.html">
<img alt="HTML" src="images/Android.png" width="200" height="200">
</a>
</body>
</html>
androidInfo.html
<!DOCTYPE html>
<html>
<head>
<title>Clickable image</title>
</head>
<body>
<h1>Android Info.</h1>
<p>Android is a mobile operating system based on a
modified version of the Linux kernel and other open
source software, designed primarily for touchscreen
mobile devices such as smartphones and tablets.</p>
</body>
</html>
Output :
Clicking on the first image opens a Wikipedia page on HTML and clicking on the Android logo (Second image) opens up the page in the screenshot below.
That’s it for this post.
Goodbye.
DeveloperXon 
Leave a Reply