Using image as a link in HTML

In this post we will see how to use an image in our html document as a hyperlink. That means when you click on the image it will direct you to your defined web page. To do so, you need to know two basics of html:

Once you learn how to add hyperlinks and how to add images, then you are ready to proceed.

We know that we can add links using the a tag. Lets consider this hyperlink code:

[html] <a href="http://www.codefap.com" > 
Take me to codefap blog 
</a> [/html]

In the above code, it is very clear that the text “Take me to codefap blog” is a hyperlink which will direct you to the website. Now if we question ourselves – What if we want an image to direct us to the website instead of the simple text?

The answer lies within the question itself, We have to replace the text with the image code. So lets first have a look at the image code:

[html] <img src="http://www.codefap.com/wp-content/uploads/2012/10/Test.png" /> [/html]

Now lets replace the text “Take me to codefap blog” with the image code. So it will look like this:

[html] <a href="http://www.codefap.com" >

<img src="http://www.codefap.com/wp-content/uploads/2012/10/Test.png" />

</a> [/html]

Now in simple terms, we have a image in our code. And which is bound by opening a tag and closing a tag. We get our image as a hyperlink because a tag will simply transform everything between its opening tag and closing tag into a hyperlink which will direct to hypertext reference (href).

The last part of the code would look like this :

Leave a Reply