How to Disable right click context menu on images
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?).
1. 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">The script will disable the context menu and replace it with this alert box:
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by Blogger Addict (http://addictofblogging.blogspot.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>
- You can replace the message with whatever you like in line var alertMsg="Image context menu is disabled";
- If you prefer not to show the alert box, just delete or comment out code line alert(alertMsg); and var alertMsg="Image context menu is disabled";. To comment out a line of Javascript, place two slashes "//" in front of the line, like this: //var alertMsg = "Image context menu is disabled";
2. 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:
An example:
This is the original image tag:
<imageborder="0"src="http://3.bp.blogspot.com/-MK7fhu_OMKA/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_OMKA/SLWREIy96AI/AAAAAAAAAPo/d-w9hOxZkqU/s1600/2008_10260151.jpg" />We hope this tutorial may have helped you in learning How to Disable right click context menu on images. Share this tutorial with your friends and don't forget to subscribe us.
Post a Comment