Html 使图像不可选择

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5983729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:34:57  来源:igfitidea点击:

Make images not selectable

htmlcssdreamweaverphotoshop

提问by BDGapps

I am making a website in dreamweaver CS5. I exported the images from photoshop an inserted them into a table. When I view the site all the images are selectable(you are able to drag them to your desktop). How do I change this??? I want to do it with an onclick method in addition how would I achieve this?

我正在使用 Dreamweaver CS5 制作网站。我从 photoshop 导出图像并将它们插入到表格中。当我查看站点时,所有图像都是可选的(您可以将它们拖到桌面上)。这个怎么改???我想用一个 onclick 方法来做到这一点,另外我将如何实现这一点?

<td><img src="images/people_03.png" name="one" width="1000" height="156" id="one" ONCLICK="closeimages();"/></td>

采纳答案by awake12

Easiest way I think would be to make the images as css background images to each cell

我认为最简单的方法是将图像作为每个单元格的 css 背景图像

回答by BBog

I stumbled upon this question while struggling with the same problem but the accepted answer was not a possible solution for me.

我在解决同样的问题时偶然发现了这个问题,但接受的答案对我来说不是一个可能的解决方案。

I used the info found here, in particular adding the following styles to my body, inside the css (this worked for me in Firefox, Chrome and Opera, I cannot test for IE)

我使用了此处找到的信息,特别是在 css 中将以下样式添加到我的 body 中(这在 Firefox、Chrome 和 Opera 中对我有用,我无法测试 IE)

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;

The unselectable html tag seems also helpful, but it's apparently supported only by IE and Opera:

不可选择的 html 标签似乎也有帮助,但显然只有 IE 和 Opera 支持它:

<img src="1.jpg" unselectable="on">

as well as the javascript solution, that is said to work on IE and webkit browsers:

以及 javascript 解决方案,据说适用于 IE 和 webkit 浏览器:

<script>
window.onload = function() {
    document.body.onselectstart = function() {
        return false;
    }
}
</script>

Note. As Albert Renshawpointed in the comment this method no longer works in Chrome > 50.

注意。正如Albert Renshaw在评论中指出的那样,此方法不再适用于 Chrome > 50。

回答by Linh Dam

I would use pointer-events: none;in my CSS

我会pointer-events: none;在我的 CSS 中使用

img {
  pointer-events: none;
}

回答by Amir Hossein Ahmadi

This works:

这有效:

pointer-events: none;
user-select: none;