Make that Image Clickable - Chapter 8

It’s great that now you know how to add images to a website just like you must have seen on some other websites. But you must have also noticed that those images were clickable. Right?

By Clickable I mean to say that when you click on that image it may take you to new webpage or even a new website.

So how do we achieve that functionality on our website? Below are the details of

• What are Clickable images?
• Why they are important?
• How to use them on our website?

What are Clickable images?
Clickable images are those hyperlink images that contains link to some other webpage / website in it. If you click on it, you will be redirected to somewhere else.

Why they are important?

You can make an image such that on clicking on it will redirect you to new URL. They can basically used on Homepage of a website.  Just like Homepage of Pinterest.com . You can view lots of images on main page and on clicking of any image will take you to its actual article/website.

Eg: Click on this link http://www.pinterest.com/fresherstalent/ you will see lots of images posted by me. On clicking of any image it will redirect you to FreshersTalent.com.

How to use them?

Just like any other HTML tag, to make Hyperlinks / links on a webpage <a> tag is used. It also has it Closing Pair/ Tag. So it goes like this <a> </a>.

 Like <img> tag, <a> tag also has its own attribute that tells the link exactly where to go/redirect.

As we used src for <img> to tell the source URL of that image, we use href in <a> tag to tell where this Hyperlink should refer to. Basically the Hypertext reference for that image. Below is the syntax:

<a href = “URL”> YOUR CONTENT </a>

URL - is any URL/Web address that you want to redirect. Eg. You can type www.FreshersTalent.com instead of that URL.

YOUR CONTENT can be your an image or even a simple text.

You must have seen in many website article that to read more Click Here and on clicking it you are again redirected to new webpage.

So basically you can convert anything into a Hyperlink in HTML.

For Images:

<a href =”URL” >  <img src=”Image URL”/> </a>

Replace URL with any web address. Like www.FreshersTalent.com

And for Image URL you can use any URL. Like

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYskR6impVm93n1AqdTBp8e1T_aF-1eM6dOzcE-7gvt7Sf-yoPBWSvF4J9ux7XJ3pzU3ArbksEGbbpJPfG5b1sjQBOHMUi35hd7kRizutXrlXG1Xo7R0WBKPJCilJhbAKQN80ihEYW0IWg/,10110000ef8dffff/Freshers_Talent.png

Eg : 

For Text Link:

<a href =”URL”> ANY TEXT </a>

Eg: CLICK HERE

For any query related to this topic,please leave comment.

Do not spam as it will be removed.