Make image clickable – HTML

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: