In one of my previous post we already discussed on How to Disable CTRL+U, CTRL+C and Right Click on a Webpage and Today’s tutorial is about how to disable right clicking and dragging on images using jQuery on any webpage. Even if you are familiar with little bit of jQuery and css-selectors you can edit the script in order to disable or enable right click and dragging on any kind of HTML element. You can disable right click on images with a special class or children of a particular element. Many times i get requests from my blogger friends and clients that they wants to secure the images on their sites and prevent people from downloading or saving them. Most of them want me to update the site in order to prevent users to right click on image and save image or drag image to their Computer or application like Photoshop.

OK, but why you should disable right click and drag on images in your blog or website? Well, this is not necessary and even i do not recommended using this script to disable right click on images because it isn’t just for bad user experience but it would be extremely annoying to many users.

But still if you thinks this script should be added to your blog, then here is script you can use to disable right click on drag on images. This script is works based on jQuery so, your blog must have a jQuery plugin installed. if not, add below jQuery plugin above the </head> tag in your blog or website.

Also see : How to disable selection of text in a web page using CSS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Now, Its time to add the jQuery script that will disable right clicking and dragging on images in your blog website. All you have to do is to add below script above </body> tag in your blog / website’s HTML.

<script type="text/javascript">
$(document).ready(function(){
// this part disables the right click
$('img').on('contextmenu', function(e) {
return false;
});
//this part disables dragging of image
$('img').on('dragstart', function(e) {
return false;
});

});
</script>

That’s it. Now visit your website and try to right click on any image and see how actually this script works. :D

Additionally, Here is an another way that you can use to disable right click on image using Javascript, (Yes, Javascript. Not jQuery) If you don’t want to add above jQuery script to your blog or you want only right clicking to be disabled and not dragging (However, you can remove drag disabling function from above script too) simply you can use below Javascript code that you have to paste before </head> tag in your blog or website’s HTML.

<script type='text/javascript'>
//<![CDATA[
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
return false;
}
}
document.oncontextmenu = nocontext;
//]]>
</script>

I hope this tutorial help you to disable right click and drag on images. If so, Don’t forget to share this tutorial with your friends. :)