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

  Uncategorized

Disable Right Click on All Images 

 <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://c.saavncdn.com/801/Kick-Hindi-2014-500x500.jpg" />        <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://c.saavncdn.com/801/Kick-Hindi-2014-500x500.jpg" />        <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://c.saavncdn.com/801/Kick-Hindi-2014-500x500.jpg" />

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.

(Visited 6 times, 1 visits today)

LEAVE A COMMENT