Unlinking Images

To the right is an image uploaded to Blogger. The image is 450px wide x 665px high and "medium" was selected during upload, making it 217px x 320px on the page. Blogger produced a scaled image for the blog: it is actually a smaller copy of the original.

If you click it you will get the full size version. The image code, seen while in the editor's Edit Html mode, is pretty standard for a Blogger upolad:
<a onblur="try {parent. deselect BloggerImageGracefully();} catch(e) {}" href= "http://3.bp.blogspot.com/ _TUd2gQn_l3o/ SZjrROU8H2I/ AAAAAAAAA7w/ B4qJyJ1PHNA/ s1600-h/ img_0831cwcs4.jpg"> <img style="float: right; margin: 0px 0px 10px 10px; cursor: pointer; cursor: hand;width: 217px; height: 320px;" src="http://3.bp.blogspot.com/ _TUd2gQn_l3o/ SZjrROU8H2I/ AAAAAAAAA7w/ B4qJyJ1PHNA /s320/ img_0831cwcs4.jpg" border="0" alt=""id="BLOGGER_PHOTO _ID_ 5303247242364985186" /></a>

How would it be unlinked so it can't be clicked larger? The first thing is: some people know how to find the full sized copy, so if you are protecting the image it might be better to scale a copy for the blog and save it with some compression, and upload.

Looking at the colored code above, the maroon is the linked image and the green is the displayed image. Notice the maroon surrounds the green. To remove the link, after uploading the image, click the Edit Html tab, find and delete the code I show in maroon – both before and after the green.

I have done that to the image on the right. Click it. Here's the code that remains:
<img style="float: right; margin: 0px 0px 10px 10px; cursor: pointer; cursor: hand;width: 217px; height: 320px;" src="http://3.bp. blogspot.com/ _TUd2gQn_l3o/ SZjrROU8H2I/ AAAAAAAAA7w/ B4qJyJ1PHNA /s320/ img_0831cwcs4.jpg" border="0" alt="" id="BLOGGER_PHOTO_ ID_ 5303247242364985186" />

Is there anything else that can be done? Let's say the image is reduced to blog size and there is no larger image. You can always leave the click-code, but have it point to a smaller version. That could be 200px high, which would be "small" during upload, or 144px high, which is the Picasa thumbnail size.

In this third version, I have used the 144px high copy as the linked image. Try that one. Here's the link portion code:
<a onblur="try {parent. deselect BloggerImageGracefully();} catch(e) {}" href= "http://3.bp. blogspot.com/ _TUd2gQn_l3o/ SZjrROU8H2I/ AAAAAAAAA7w/ B4qJyJ1PHNA/ s144-h/ img_0831cwcs4.jpg">
Note, s144-h/ replaces s1600-h/ that was in the first image. s200-h would be Blogger "small".

And there's nothing to stop you uploading a standard click-to image and just changing the address in the link portion of the code. The fourth image does that. Here's the full code; note the link code is for one image and the displayed image code is for the hydrant.
<a onblur="try {parent.deselect BloggerImageGracefully();} catch(e) {}" href= "http:// 4.bp.blogspot.com/ _TUd2gQn_l3o/ SZjrRFSNmVI/ AAAAAAAAA74/ XfQ9tp9caJ0/ s400-h/img_1153cs2wc.jpg"><img style="float:right; margin: 0px 0px 10px 10px; cursor:pointer; cursor:hand;width: 217px; height: 320px;" src="http://3.bp.blogspot.com/ _TUd2gQn_l3o/ SZjrROU8H2I/ AAAAAAAAA7w/ B4qJyJ1PHNA/ s320/img_0831cwcs4.jpg" border="0" alt=""id="BLOGGER_PHOTO _ID_ 5303247242364985186" /></a>

You can see that when hovering, the cursor changes to a hand for the second image, even when the link code is removed. That is controlled by cursor: in the displayed image code and both cursor:pointer; and cursor:hand can be removed.