Introduction: In this article I am going to share two ways to prevent
the right click only on specific images or all images rather than all the
contents(text and images) in asp.net web
page using jQuery to avoid/protect the images from being copied
In previous articles i explained How to jQuery to prevent right click on asp.net web page and jQuery to Check Uncheck all items in CheckBoxList on click of Select All CheckBox and jQuery to get Asp.Net DropDownList Selected item value,text and index and jQuery AJAX JSON example to call server side function without any post back and Upload multiple files or images through one fileupload control using jQuery
Description: Disabling right click on images may be required if
we don’t want to allow the user to copy the images from the page.
Implementation: I have presented two ways to prevent right click
on images. Let’s create a sample web page to demonstrate the concept by both
methods.
Disable Right Click on All Images
First Way:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable right click on images on asp.net
web page using jQuery</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
type="text/javascript">
$(function () {
$('img').on("contextmenu", function () {
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuS3tv-KxxI8idRj1XsxQ1TPxzwagMIlu2GcNr84SKfTf-6RF29ZIWolvSjRfbCAMiDkszf14vSpQAyY6zmOOMRDMzs7DAUHUJnKcM_kx_I0IOaXAeP-l7oIOipCC8Reyg9cyYPCqRQx8/s1600/webcodeexpert.com+banner.png" />
<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
</div>
</form>
</body>
</html>
Second Way:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable right click on images on asp.net
web page using jQuery</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
type="text/javascript">
$(function () {
$('img').on("contextmenu", function (event) {
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuS3tv-KxxI8idRj1XsxQ1TPxzwagMIlu2GcNr84SKfTf-6RF29ZIWolvSjRfbCAMiDkszf14vSpQAyY6zmOOMRDMzs7DAUHUJnKcM_kx_I0IOaXAeP-l7oIOipCC8Reyg9cyYPCqRQx8/s1600/webcodeexpert.com+banner.png" />
<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
This is dummy text<br />
</div>
</form>
</body>
</html>
Disable Right Click on specific image
If we want to disable right click
on only specific image then we need to assign id to the img tag as highlighted below:
<img id="myImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuS3tv-KxxI8idRj1XsxQ1TPxzwagMIlu2GcNr84SKfTf-6RF29ZIWolvSjRfbCAMiDkszf14vSpQAyY6zmOOMRDMzs7DAUHUJnKcM_kx_I0IOaXAeP-l7oIOipCC8Reyg9cyYPCqRQx8/s1600/webcodeexpert.com+banner.png" />
And then we can disable right click on this specific image by just
changing the above mentioned jquery function to the following
<script
type="text/javascript">
$(function () {
$('#myImg').on("contextmenu", function () {
return false;
});
});
</script>
Run the page and you can right click on the text content but you will
not be able to do it on image.
Now over to you:
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..