Make an image/picture clickable or as a link

This is one tutorial that I intended to present earlier but had procrastinated far too long until now! It simply took a visitor to my blog to wake me up from my slumber with her request on how to make an image or photo into a clickable link or hyperlink to another webpage.

I'm sure you've come across blogs (hehe...mine included) having clickable picture thumbnails, especially for related posts, recent posts or popular posts! These clickable images are generated automatically by the readily available widgets that were installed and proven beneficial to bloggers and visitors alike. But, didn't you ever wished that you know how to make images of your own choice clickable too?

Well, it's rather simple actually once you know the HTML format!

If you know how to make a text link, then it's as easy to make any image, button or badge an active link.

Needless to say but a gentle reminder nonetheless - to make a picture link, you have first to upload your photo on the website (e.g stored on Photobucket, Blogger.com or Flickr.com) to have available the URL or source (location) of the photo which is needed in its HTML format.

To make a text link,
the basic HTML format is like this:

<a href="URL of the target site">Text</a>
(change only the URL and text that are highlighted in red as you wish)

To make an image or photo link (or a clickable picture),
you just need to add the image tag, <img /> within the text link, replacing the 'Text', which will then look like this:

<a href="URL of the target site"><img src="URL of the photo" /></a>
(change both the URLs that are highlighted in red, accordingly as you desire. The first URL is the web address that you want the photo to be linked or targeted to, whereas the URL of the photo will be the source or location where it's stored)

Besides the src attribute, the <img /> tag may contain the following recommended attributes :

• alt attribute - specifies the alternate text description for the image. Just in case the image cannot be displayed or loadable for whatever reason, at least this text will be seen to provide alternative information about the image. Moreover, the text but not the image can be read by search engines;
• width and height - this is the width and height of the image in pixels. Needed so that the space is reserved on the webpage should the image not be displayed;
• border="0" - include this if necessary. This attribute will remove the blue-coloured border around your image if it exists.

The attributes can be placed in any order in the <img /> tag provided it starts with img, then followed by the rest of them with a space in between.

A complete sample of the <img /> tag will be like this:

<img src="URL of the photo" alt="add some text to describe the image" width="100" height="75" />
(here again, just change those highlighted in red accordingly.)

For this tutorial, I'll use the photo below as an example. It is an image of a plate of pan-fried savoury steamed pumpkin cake. And I'll use it to link to its recipe published at 'Peacockflower's World', my other blogspot blog.

An unlinked picture of a plate of Pan-fried savoury steamed pumpkin cake

Now, to make the image or picture a link, that is, clickable or active, just add the <img /> tag (highlighted in blue for emphasis) inside the link tags (coloured red), which will appear as follows :

<a href="http://peacockflower.blogspot.com/2010/11/savoury-steamed-pumpkin-cake-recipe.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkvPehm8X3RpiGplW48k5Oz1V3rthu-xu_XgoDX1Ienl45C86h52euZuNp2L_17I7E3DfsnWIMA6PJasdCXEq2JhbvqbwRoK8zRoNb0ASmdGt9ZeTGZE0GsvU3pGvl46DdA53qOH9ps8/s320/IMG_6344+copy.jpg" alt="A plate of pan-fried savoury steamed pumpkin cake" width="320" height="240" /></a>

And, the above HTML code will result in the following clickable picture :

Clicking on this image will link to its recipe that opens in the same window
and you'd need to click the back button to return to this page

To enhance the HTML format for the image link, I've included in the link tag a target attribute to enable the link to open in a new window, plus a title attribute which will provide info on what to expect when the image is clicked or describe the purpose of the link. An example as below:

<a href="http://peacockflower.blogspot.com/2010/11/savoury-steamed-pumpkin-cake-recipe.html" target="_blank" title="Click to view in a new window the pumpkin cake recipe"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkvPehm8X3RpiGplW48k5Oz1V3rthu-xu_XgoDX1Ienl45C86h52euZuNp2L_17I7E3DfsnWIMA6PJasdCXEq2JhbvqbwRoK8zRoNb0ASmdGt9ZeTGZE0GsvU3pGvl46DdA53qOH9ps8/s320/IMG_6344+copy.jpg" alt="A plate of pan-fried savoury steamed pumpkin cake" width="320" height="240" /></a>

....resulting in the following clickable photo:

Clicking on this image will link to its recipe that opens in a new window.
Mouseover the image to read the title's text.

Other related links:

• HTML Goodies on Basic HTML: Images
• Catcode.com on Making an image clickable
• Blogger Tips and Tricks on Make a clickable picture

Enjoy!

Keep learning~~keep smiling~~keep sharing!!