Tuesday, July 31, 2007

Make a clickable picture (image, photo or screenshot, banner)

In response to a reader's request, I am showing in this post how to make a picture (an image, photo or screenshot) clickable, that is, become a hyperlink.

The first thing is you must get the picture up on the web. This you can do by uploading to Photobucket, Get Blogger to host your picture or start a PUBLIC Google group to upload your photo. Get the URL of the photo on the web.

The basic HTML for the clickable picture (picture hyperlink) is:

<a href="URL of target site"><img src="photo URL"></a>

To the ><img> tag, you can add more attributes separated by space, especially the alt="description" tag which will give some information of the picture and will server 2 purposes. Search engines cannot read images, but they can read what is written what is typed between the "" marks in the alt="" tag. This will help the search engines knows more about your post and helps in SEO (Search Engine Optimization). When for whatever reasons the picture cannot be displayed, instead of an empty box, the visitor will see what it typed between the "" marks in the alt="" tag.

Another attribute is the width="W" where W is the width of the image in pixel you want it to display. This is especially important when the image you uploaded is a wide picture which may exceed the width of the main column (if you include it in a post) or the width of the sidebar (if you put the image in the sidebar). You will then have to know what it the width of the main column or siderbar. Refer to How to find the width of the blog Header, main column and sidebar (click BACK button to get back to this page).

A less important attribute is the title="" attribute. If you add this attribute, when a visitor hovers the mouse over the picture, a tool tip will appear displaying what you typed between the "" marks. This may give more information to the visitor on what to expect if he clicks on the hyperlink picture.

As an example, I will put a clickable button (made by a grateful reader without me asking) below:

blogger resources, help for bloggers using Google Blogger platform. It is supposed to link to this blog, but since your are already in this blog, I have linked it to a site made for complete Blogger beginners. Hover the mouse and observe what happen and click on the banner to see where it takes you. For clarity, I will put the HTML used to display the clickable banner in the scroll box below:

<a href="http://dummies-guide-to-google-blogger.blogspot.com/" target="new"><img src="http://2.bp.blogspot.com/_jizoPL28qCY/Rp8UuG48MuI/AAAAAAAAAYQ/BaK8uEAPJic/s1600/Peter%2BChen%27s%2BBlogger%2BTips%2B%26%2BTricks.jpg" alt="blogger resources, help for bloggers using Google Blogger platform" title="Get great information and help here by clicking on banner"></a>


For more information, refer to How you can help Blogger Tricks and Tips (on a completely voluntary basis, no one should feel obligated)

53 comments:

  1. You can even use this trick to offer the reader the option of viewing a larger size version of the same image. Just upload the full-sized version (say 500 x 500 pixels) but in your image tag code, force the dimensions to half of that.

    Take a peek at my latest blog entry (Collective Soul’s "Afterwords" Coming Soon!) to see what I'm talking about...

    ReplyDelete
  2. Hi! from Peter 2. Glad to see it came in handy. Many thanks again!

    ReplyDelete
  3. PLEASE HELP ME SIR¡
    I HAVE DELETED MY WHOLE BLOG BY INACCURACY.
    IS THERE ANY WAY TO RECOVER IT?
    I APPRECIATE YOUR SUPPORT.
    THANKS IN ADVANCE.

    ReplyDelete
  4. Hi Sabinas,

    Sorry to hear about your problem. Neither you nor I can do anything. The only people who can help is Blogger Employee or Blogger support. Refer to Problem in signing in, seeing your blog in the Dashboard, etc and How to contact Blogger support or post your problem the Google Blogger Help group and pray that Blogger Employee sees your request for help. If you have further problems, try emailing support@blogger.com

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  5. Peter, thank you very much for this blogger tip! I will try to use it more often in my blog!

    peace, Villager

    ReplyDelete
  6. Peter - Thank you! Works great! -from Peter3

    ReplyDelete
  7. Thank you very much for your tips, Mr. Chen.
    I have recovered my blog tonite¡¡¡¡
    I am very grateful with you.
    Best regards.

    ReplyDelete
  8. dear peter chen,

    Please Help me...

    Now if i click my pictures in my blog, the windows popup to download the pictures appeared...not preview in my browser. I dont have this kind of problem before this...

    My sites :http://visitmall.blogspot.com/

    ReplyDelete
  9. Hi MyDelileala,

    I am afraid I have no explanation or solution except to comment I vaguely remembered a similar situation. Anyway asking others and see if I can get something for you.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  10. Hi mydeleila,

    Have a look at solution to picture download instead of view picture problem.

    Peter Blog*Star
    Dummies Guide to Google Blogger
    "online book" in progress. Use the CONTENT at the top of the main column

    ReplyDelete
  11. Hi. Please help. I want my pictures in a post to be unclickable. How to do that?

    Thanks a lot!

    ReplyDelete
  12. Hi Princess Dyanie,

    I am not sure I can answer your question, but first if I am to try, you will have to let me know how you added the photo.

    Now a guess. I think you can try resizing the photo so that the photo on the web is the same size as the photo in your blog post. Just guessing.

    Peter Blog*Star
    Successes with Kontera ContentLink

    ReplyDelete
  13. Thank you so much for this! It was a great help.

    ReplyDelete
  14. Hi,
    I have a blog http://mp3-downloads121.blogspot.com where i am not able to hyperlink the product images with my amazon affiliate links.
    Please, guide me to hyperlink product images with my affiliate links.

    ReplyDelete
  15. I want to post a picture in the sidebar and have a link under it that says find similar at. How do I write it and where do I put the code?

    ReplyDelete
  16. Refer to image in sidebar. If that don't show you how, ask again.

    ReplyDelete
  17. I'm trying to figure out how to create a clickable image with menu options to enter a site, like this site: http://blogsbydanielle.blogspot.com/

    Any help is appreciated

    ReplyDelete
  18. That is already explained in this post. But anyway, here it isL

    <a href="URL of target site"><img src="photo URL"></a>

    What is the problem?

    ReplyDelete
  19. I have a pic in header and the HTML area looks like this:

    #header-wrapper {margin:0px auto 0px; padding: 0 0 0; width: 100%; height: 150px; background: #0C0E0F url(blabla.jpg) no-repeat top left;}
    #header-column-container {width:100%;height: 180px;margin: 0 0 0; padding: 0 0 0;clear:both;}
    #header-column-left {margin:0 0 0;padding:0 0 0;float:left; height: 148px;}........

    where does that code fit in this sequence?

    ReplyDelete
  20. What I want to know is how to get the url so OTHER people can put my tab on THEIR blog. As a link from their blog to my site.

    ReplyDelete
  21. As I was reading this post of yours I realized that what I really want to know is:
    How did you get the scroll box?? It's the scroll box I want so I can put the html for my button in it. Can you help me with that?

    Thanks!!!

    ReplyDelete
  22. Tab? Like in a horizontal menu bar? Maybe active clickable hyperlink?

    ReplyDelete
  23. For Taralee,

    Maybe this is what you want:

    How to make a scroll box

    I have a post on putting HTML code in a scroll box but for the moment cannot find it.

    ReplyDelete
  24. hiya i am trying to add a picture into my blog post via insert picture, i have done this before with no issues but now when i have added and tryed to publish blogger is stopping and quoting url error highlighting the picture script it has created?
    i now run vista and a different laptop is this the problem?

    ReplyDelete
  25. Try different browser or/and computer

    ReplyDelete
  26. Great little piece of information. It worked wonderfully in my blog image. Thanks.

    ReplyDelete
  27. how can I make a picture gadget like amarbangla.blogspot.com.
    is gadget inside many film poster(picture) and its automatically scroll left to right @ when my mouse cursor ..up on the picture . picture is stop.I known English little.how can i make this gadget.sir my mother tang is Bengali. sir please send me solve this problem.email-lochanbiswas@live.com

    ReplyDelete
  28. I visited that blog and found this:

    Dear Web Visitor,
    This Page is under construction or may be removed from the server.

    Thanks & Regards,
    Tushar Chowdhury

    ReplyDelete
  29. After 2 frustrating days of trying to make a clickable thumbnail (youtube, blog tutorials, blogger help), I finally finally found your blog and figured it out in 3 minutes with this post.

    Thank you thank you thank you!!

    Cheryl

    ReplyDelete
  30. Image enlargement.
    When a visitor clicks an image on my blog it opens an enlargement in the same window, and the back button on the browser will not close the image and return the visitor to the blog. How do I fix this?
    Thanks

    ReplyDelete
  31. Back button don't work? I haven't noticed but for enlargement to open in new window, add target="_blank" or target="new" attribute to the <a> tag. Refer to anchor text, hyperlink and how to make it open in new window. If you don't understand copy-paste the script in your post editor (edit html mode) here taking note of how to display special characters

    ReplyDelete
  32. I have added a target="_blank" to the HTML on this page image:
    http://www.dressage-saddles-uk.com/blog.htm
    as follows:

    id="BLOGGER_PHOTO_ID_5438239044785282354" border="0" /" target="_blank">

    but it still opens in the same page and will not respond to the back button on the browser...Firefox/3.5.7
    any help appreciated thanks

    ReplyDelete
  33. You made 2 mistake, 1 critical - ...border="0" /" target="_blank">

    it should be
    ...border="0" target="_blank">

    ReplyDelete
  34. thank you,Peter,for this very helpful info!

    ReplyDelete
  35. thank you! i made my first clickable badge and it worked on the first try!

    ReplyDelete
  36. Thanks for the advice.

    George Vreeland Hill

    ReplyDelete
  37. Thanks! This allows me to direct my readers between both of my blogs via clickable photos!!!

    ReplyDelete
  38. Thank you very much for valuable
    information.
    Do me a favor, explain how to open
    an Amazon banner in a new window.
    Thanks.

    ReplyDelete
  39. thanks heaps for this! I was advertising a blog for someone nice who advertised mine :) it was really easy too.
    ilovecloudstrife.blogpost.com
    thanks again !

    ReplyDelete
  40. I am trying to get affiliate advertising banners to fit side by side on a page. I have removed the side bars on all my pages, so there is room.

    ReplyDelete
  41. Hi All,
    Im new to Blogger and is having this problem. Does anyone know how can i load my images under my header and have them scroll from left to right just like the website below?

    http://www.alluringarray.com/

    I have tried the alternative of inserting slideshow widget to the sidebar but i want the images to scroll instead of changing one by one.

    Pls help to advice me on this.

    Thanks in advance!!

    Regards
    Felicia

    ReplyDelete
  42. Like this one? Testing marquee with horizontal scrolling pictures

    Refer to Extra "Add a gadget fist to create an extra add a gadget for the Header

    ReplyDelete
  43. Thanks for the great advise. It's important to give the original source credit when credit is due.

    ReplyDelete
  44. great tips, it helped me a lot.
    thanks for the tips

    my blog http://pakitvdramas.blogspot.com

    ReplyDelete
  45. Peter sorry if i ask you but i can't find a solution! i need a template that allow open external link by directly clicking the post images on blog main page

    ReplyDelete
  46. You can edit the template to make all links open in new windows but take note, even those you don't want to open in new window will do such.

    ReplyDelete
  47. Thanks so muc for this! I just tried it and it worked wonderfully!

    ReplyDelete
  48. Would love to learn how to make a single picture frame that has thumbnails beneath it within blogger posts.

    Sort of like this:http://www.llbean.com/llb/shop/31178?feat=592-GN1
    But simpler!

    ANy ideas??

    ReplyDelete
  49. Thank you so much for solving my problem, you made it so easy!!!

    ReplyDelete
  50. Thank-you for the tip and providing an example. Worked well!

    You can see how I used it here...
    St. Paul Chiropractor | Mendota Heights Chiropractor

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics