Please disable your adblock and script blockers to view this page
 

jQuery to disable mouse right click on images only in asp.net web page to prevent images from being copied

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
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="http://4.bp.blogspot.com/-NJWLvd85AOg/VA3M6yIVlWI/AAAAAAAAPs4/hc6WOvAxDZ8/s1600/webcodeexpert.com%2Bbanner.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="http://4.bp.blogspot.com/-NJWLvd85AOg/VA3M6yIVlWI/AAAAAAAAPs4/hc6WOvAxDZ8/s1600/webcodeexpert.com%2Bbanner.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="http://4.bp.blogspot.com/-NJWLvd85AOg/VA3M6yIVlWI/AAAAAAAAPs4/hc6WOvAxDZ8/s1600/webcodeexpert.com%2Bbanner.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:
" I hope you have got the solution to prevent right click on images and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon