如何禁用仅在一张特定图像上右键单击保存

发布于 2024-08-09 13:50:27 字数 240 浏览 4 评论 0原文

我正在运营一个亚洲电子商务网站,用户可以在其中发布其产品的图片。有没有办法禁用页面上仅 1 个特定图像的右键单击?

例如,当查看产品时,有一个大图像,然后是该产品的一些缩略图。当尝试右键单击大图像时,我想禁用右键单击,但如果他们尝试右键单击缩略图,我不想禁用右键单击。

谢谢

ps - 我完全理解为什么不禁用右键单击的可用性原因,但版权和图像盗窃在亚洲是一个比北美国家更大的问题。另外,这比实际保护内容更能让卖家安心。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

陌路黄昏 2024-08-16 13:50:27

如果您想要的只是阻止用户保存图像,您可以使用pointer-events css 属性来做到这一点:

img {
  pointer-events: none;
}

本质上,要做的就是阻止任何鼠标事件到 img 元素。您仍然会看到一个对话框,但这与背景图像相同。

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

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/

小镇女孩 2024-08-16 13:50:27

虽然它不符合 W3C 标准,但 oncontextmenu="return false;" 作为属性应该完全符合您的要求。

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

秋凉 2024-08-16 13:50:27

完全阻止人们是徒劳的,然而,我最喜欢的至少让它稍微困难一点的方法是在图像的顶部放置一个 div。

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

尝试一下它以获得你想要的东西。为了使其看起来更语义化,您可以将文本放置在空的 div '图像受版权保护' 中,然后对其执行 text-indent: -9999px 操作。我经常尝试将空元素变成语义元素。

话虽如此,我最喜欢绕过这样做的人(例如 eBay)的方法是使用插件 Nuke Anything 增强版 适用于 Firefox。在图像技巧上使用 div 需要大约 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.

笔落惊风雨 2024-08-16 13:50:27

如果您在网络上发布图像,则没有万无一失的方法可以阻止某人保存副本。它必须通过线路发送才能显示,并且坚定的用户可以使用 Wireshark 或 Fiddler 等工具或任何浏览器调试框架(例如 Firebug)拦截它,即使您找到一种方法来禁用右键单击和拖放以桌面。

你可以做得稍微困难​​一些,但恕我直言,这种努力是不值得的。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文