SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Wednesday, November 17, 2010

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
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="http://4.bp.blogspot.com/_yue3lWqntTA/TNZqxgR0V_I/AAAAAAAACIk/gEW5SXLIEDs/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 :

A plate of pan-fried savoury steamed pumpkin cake
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="http://4.bp.blogspot.com/_yue3lWqntTA/TNZqxgR0V_I/AAAAAAAACIk/gEW5SXLIEDs/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:

A plate of pan-fried savoury steamed pumpkin cake
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:

Enjoy!

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

11 comments:

  1. Hi...
    I have a problem in my blog..
    I have expandable post summaries in my home page as like u have .
    I have some pages too like About me and disclaimer pages...
    I have continue reading link for my post summaries in home page but the same is reflecting in my other pages like about me too...
    I dono hw to fix this problem...
    Could you please help me out?
    My blog url is...
    http://cookerypoint.blogspot.com/

    Looking forward for ur reply...

    ReplyDelete
  2. Hi Ila! I'm puzzled as to why the 'Continue reading...!' link appears in your Pages for About Me and Disclaimer! Reason being the Insert Jump break icon is unavailable on the Post Editor's toolbar for Pages. Hence, there's no way the text 'Continue reading' could emerge unless you've added it manually. Further checking at your blog's view source showed that you have placed a html text link back to those pages after your name. If so, just go to Edit Pages and remove the unwanted link.

    ReplyDelete
  3. Hi Jack...
    Yup i inserted code manually for the expandable post summaries for my main page.... I did t by referring http://www.blogdoctor.me/2007/02/expandable-post-summaries.html.
    I added read more link in edit html of my template as said in this article...
    I went thru edit pages and i cudnt find any unwanted after my name...
    If i remove readmore link in edit html then probably there would be collapse in my expandable post summaries... Hw cud i help it?

    ReplyDelete
  4. Ila, in my opinion, you have 2 options:
    1) Since you've customized your template following the Blog Doctor's tutorial, why don't you direct your problem back to him to help solve it;
    OR
    2. Remove all the related readmore html codes you've inserted earlier and rely on Blogger's default template which already included the relevant 'read more' html codes. My tutorial @ http://jacqsbloggertips.blogspot.com/2010/01/bloggers-read-more-with-jump-break.html is referred.

    ReplyDelete
  5. Hi

    Thanks for ur reply ...and i did t
    :)

    ReplyDelete
  6. You're welcome, ila...great to know all's well!

    ReplyDelete
  7. I HAVE PROBLEM IN MY BLOG, I CAN OLLY POST A SINGLE POST IN PAGES, I WANT TO ADD MANY POSTS IN PAGES PLZ HELP....

    ReplyDelete
  8. thank you for this great
    work i wonder how you do this

    ReplyDelete
  9. Hello Jacq, Just want to say a thank you for the post. I have been looking for this solution 'all week', I read so many different posts, but yours is the one that made sense! Jane :)

    ReplyDelete
    Replies
    1. You're most welcome, Jane! Thank you for your kind thoughts.

      Delete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search