13

I want to prevent users from right-clicking on image on my site and saving them. I know there are many work-around for this, but I still need to do it.

Any help?

Also, this site has this feature - http://finsix.com/dart/#section-colors

It can be html, javascript, jquery. Any solution will do.

Grey-lover
  • 635
  • 3
  • 7
  • 21
  • 1
    I can also steal the image by taking screenshot and use ms paint etc to cut the image part out and save it on my hard drive :D – Meow Jun 03 '14 at 17:38
  • Better way is if you want to download that video having same quality. Goto chrome devtools(F11 or ctrl+shift+i), go to 'network' tab. and refresh. Below network calls will be there. Even if the developer loads from assets folder(Where developers keep images/spinner of their site) or from 3rd party website. It will be listed. Click on 1st one, then goto preview. Then go on next next by clicking next or 'down arrow'. When you will get. Then press right click – Satish Patro Apr 01 '19 at 05:30

3 Answers3

28
$("body").on("contextmenu", "img", function(e) {
  return false;
});

This is the "new" way in jQuery. Bear in mind anyone with technical knowledge would be able to get around this.

ntzm
  • 4,663
  • 2
  • 31
  • 35
16

Use the image as a background-image of a div element, This will keep the easy minded people away from saving it ;)

alexdd55
  • 1,109
  • 15
  • 24
  • what if you have onclick on the image? something like when you want to click image to view a larger size then you won't be able to do that because of the background image on your image. – jned29 May 19 '16 at 06:58
  • you can still set an onclick event on the container and call a function that will show the picture in a different size, or... like before.. a container, with that image as a background-image. – alexdd55 Jul 04 '16 at 13:16
  • easy minded people? – Tudor Aug 29 '17 at 15:15
  • 1
    @Tudor not web experts... simple users, not able to use source code to find background images, can disable JS scripts, etc... – alexdd55 Aug 30 '17 at 15:28
  • 2
    @alexdd55 I don't like the adjective easy :-) – Tudor Sep 04 '17 at 15:46
6
<script type="text/javascript">
function click (e) {
  if (!e)
    e = window.event;
  if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
    if (window.opera)
      window.alert("");
    return false;
  }
}
if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>

I have found this script on selfhtml.org.

This function is originally designed to disable the client side context menu and to insert your own context menu. But it can be used for this too.

But keep in mind: By using browser addons like NoScript or opening the image url user could get around this.

Jason
  • 2,503
  • 3
  • 38
  • 46