Disable right click context menu on images

Disabling right click or context menu is one of the more popular ways to prevent images from being stolen from a blog.

While it is effective to some extent in deterring casual image theft, it also frustrates honest readers by denying them access to many useful functions associated the right click such as going Back, page Reload, Bookmark and Open Link In New Window.

The better way would be to disable right click only on images. After all it’s the images they’re trying to protect, so this method is more appropriate to the task and more importantly it’s far less annoying to readers :). (It is impossible to keep people from stealing images posted on your blog or website, but hey this is better than doing nothing right?).

a) Disable right click on all images

Go to your template Edit HTML and paste the following script right after the </head> tag.

<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by GreenLava (BloggerSentral.com)
Version 1.0
You are free to copy and share this code but please do not remove this credit notice.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>

The script will disable the context menu and replace it with this alert box:

• You can replace the message with whatever you like in line 15, or
• If you prefer not to show the alert box, just delete or comment out code line 11 and 15. To comment out a line of Javascript, place two slashes "//" in front of the line, like this:

  //var alertMsg = "Image context menu is disabled";

Click on any image in this post to see it in action.

b) Disable right click on a single image

To disable context menu on a single image you need to add this piece of code (a context menu event handler) in the img tag:

oncontextmenu='alert("Image context menu is disabled");return false;'

Open the post in post editor, switch to HTML mode, locate the img tag of the image you want to disable and then insert the code inside the tag.

An example:

This is the original image tag:

<img border="0" src="http://3.bp.blogspot.com/-MK7fhu_0MKA/SlWREIy96AI/AAAAAAAAAPo/d-w9hOxZkqU/s1600/2008_10260151.JPG" />

Once you added the context menu event handler, it should look like this:

<img oncontextmenu='alert("Image context menu is disabled");return false;' border="0" src="http://3.bp.blogspot.com/-MK7fhu_0MKA/SlWREIy96AI/AAAAAAAAAPo/d-w9hOxZkqU/s1600/2008_10260151.JPG" />

Enjoy!