Testing ways to make images in post, when clicked, open in a new window

A reader of one of my blogs asked a question - how to make images in Blogger pops up in a new window (I assume he is referring to images in a Blogger post, not the sidebar, etc.) pops up in a new window.

Images that are uploaded via the photo upload icon in the toolbar of the post editor opens as enlarged image in the same window. Unfortunately, he did not mention whether he is refering to publishing photos using the photo upload icon or using the <img src="photo URL" /> tag. I can't remember if using the <img src="photo URL" width="X"> tag to display the image will open in the same window or a new window, but I am a retired scientist and so like to experiment. So, inaddition to trying to make images uploaded to open in new windows when clicked upon, I am going to use the <img src="photo URL" /> tag to display an large image already hosted on the web and see what happen when I click on it and also try making some modification to the script that display the image when uploaded via the photo upload icon if the first attempt failed to produce.

I uploaded the photo below using the photo upload icon and modified the script generated by Blogger (note: you have to be in the EDIT HTML mode to be able to do this):

Golf course, Pahang, Malaysia

Well, click on the photo and confirm for yourself that the photo opens in a new window. I did that by adding target="_blank" in the script generated by uploading the photo via the photo upload icon.The script for the above image I put in the scroll box below, with the added target="_blank" colored red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46epFoBF4vk3dso-4EqeKIhXM6XGxiITSOLg8vCCzlrG0rRU1h0znLmTnjNjYcIRbCC02QyArQKIn44R2qkjcn9dq6nOavzSQ03AcbfFa9LUAKDlL3AiQ6mEOf2zuiE2kfKwoQJGmhDDl/s1600-h/Golf+course,+Pahang.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46epFoBF4vk3dso-4EqeKIhXM6XGxiITSOLg8vCCzlrG0rRU1h0znLmTnjNjYcIRbCC02QyArQKIn44R2qkjcn9dq6nOavzSQ03AcbfFa9LUAKDlL3AiQ6mEOf2zuiE2kfKwoQJGmhDDl/s400/Golf+course,+Pahang.jpg" border="0" alt="Golf course, Pahang, Malaysia"id="BLOGGER_PHOTO_ID_5042718232745188770" /><center>Golf course, Pahang, Malaysia</center></a>

BTW the photo is copyrighted by Tourism Malaysia and is meant to be used to promote Malaysia. I know that golf can be an expansive affair in many countries, and if you happens to be from one of those country, and you are a golfer, do pay Malaysia a visit as golfing in Malaysia can be much cheaper. Have a nice and economical golfing holiday in Malaysia.

I am also going to test if photo published by using the <img scr="photo URL width="X" /> tag will open in a new window or not, so I am going to publish a photo of a native Dayak dance below"



Well, I published the post, and found that the image is not clickable. But there are ways to make the picture clickable and either open in the same or new window as I choose, so I am not going to put the same photo below, but makes it go to the enlarged photo in a new window.

.

Go ahead, click on the above image and see what happens. If you want to see the HTML I wrote for the 2 photos above, look at the codes I put in the scroll boxes below:

HTML for the first photo:

<img src="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" width="395" />

HTML for the second photo:

<a href="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" target="_blank"><img src="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" width="395" /></a>

BTW, the photo is copyrighted by Tourism Malaysia and can be used to promote Malaysia. 2007 is VMY (Visit Malaysia Year) so I hope you will hop over to Guide to Malaysia and see what awaits you.

Update 24 March 2007: This is something I have been doing before, but forgot to add to this post. To make an image open in a new page, you will place your cursor (mouse) on the image, right-click and select "open in new window/tab". However, this is not controlled by you, the poster author, but by the reader

Update 12 May 2007: Just thought it is a good idea to point to other posts which describe other ways of publishing images which open in the same or new windows. They can be found at Uploading and manipulating images in Blogger. The part about using the <img> tag is towards the bottom of the post.

There is a further update to the above post at Uploading and manipulating images in Blogger Part 2.