How to disable right-click save on one specific image only

Question

I'm running an Asian e-commerce site where users post images of their products. Is there a way to disable right click for only 1 specific image on the page?

E.g. When viewing a product, there is a large image, and then some thumbnails of the product. When trying to right click on the large image, I want to disable right click, but if they try to right click on the thumbnails, I don't want to have right click disabled.

Thanks

ps - I fully understand the usability reasons why NOT to disable right-click, but copyright and image theft in Asia is a much larger problem than in North American countries. Plus, this is more for the seller peace-of-mind than actually protecting the content.

Answer 1

Although it's not W3C compliant, oncontextmenu="return false;" as an attribute should do exact what you want.

Answer 2

Stopping people altogether is futile, however, my preferred way to at least make it slightly more difficult is to place a div over the top of the image.

<div id="image-container" style="postion: relative;">
   <img src="" alt="" />
   <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0"></div>
</div>

Play around with it to get what you want. To make it seem more semantic, you could place the text in the empty div 'Image is copyright' and then do text-indent: -9999px on it. I often try and turn an empty element into something semantic.

In saying that, my favourite way to bypass people that do this (e.g. eBay) is with the plugin Nuke Anything Enhanced for Firefox. Using the div over the image trick would take me approx 2 more seconds to bypass.

Answer 3

If what you want is just prevent the user save your image, you can do that by using the pointer-events css property:

img {
  pointer-events: none;
}

Essentially what that's going to do is block any mouse events to img elements. You still going to get a dialog box but that is the same you get with background images.

https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events https://css-tricks.com/almanac/properties/p/pointer-events/

Answer 4

If you publish an image on the web there's no foolproof way to prevent somebody from saving a copy. It has to be sent over the wire to be displayed, and a determined user can intercept it with tools like Wireshark or Fiddler or any browser debugging framework such as Firebug, even if you find a way to disable right-click and drag-drop to the desktop.

You can make is very slightly more difficult, but the effort isn't worth it, IMHO.