how to make an image "unclickable"

If you'd like to make it such that clicking on an image in your blog - either in a post or in an HTML/JavaScript widget in your sidebar - doesn't lead anywhere (such as to the image's Picasa album page), here's how:

1. Look at the HTML code for the image. If it's an image in your blog post, you'll need to be under the Edit HTML tab (not Compose). You'll see something about like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s1600-h/PHOTO.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>

2. Delete the href section of the HTML, shown below in PINK:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s1600-h/PHOTO.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>

3. Backspace if necessary, so that the catch(e) {}" tag is flush against the > symbol. The modified code should look something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>

Publish the post (or save the HTML/JavaScript gadget). That's it!

RETURN TO TUTORIALS