使图像无法选择

Question

我正在Dreamweaver CS5中创建一个网站.我从photoshop导出图像并将它们插入表格中.当我查看网站时,所有图像都是可选择的(您可以将它们拖到桌面上).我该怎么改变??? 我想用onclick方法做到这一点,另外我怎么做到这一点？

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

Answer 1

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

我使用了这里找到的信息,特别是在我的身体中添加了以下样式,在css中(这对我在Firefox,Chrome和Opera中工作,我无法测试IE)

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

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

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

以及javascript解决方案,据说可以在IE和webkit浏览器上运行:

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

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

Answer 2

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

img {
  pointer-events: none;
}

Answer 3

可靠的纯 CSS 解决方案

将以下 2 个 CSS 属性应用于您的<img>元素将完全实现您所描述的：

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

这在所有现代浏览器中都能可靠地工作。

示例：（尝试用光标选择并拖动图像！：D）

img {
  pointer-events: none;
  user-select: none;
}

<img src="https://source.unsplash.com/random/200x200" alt="sample image" />

唯一的缺点是pointer-events: none会导致您的:hover,:active和其他与指针相关的 CSS 伪类停止工作。

为了解决这个问题，您应该使用 a<div>或 something 作为您的包装器<img>，然后在该包装器上应用您的:hover,:active伪类而不是它<img>本身。

例子：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
/* Don't mind the code above... */

.image-wrapper {
  transition: ease .5s;
}

.image-wrapper:hover {
  transform: scale(1.3)
}

.image {
  pointer-events: none;
  user-select: none;
}

<div class="image-wrapper">
  <img class="image" src="https://source.unsplash.com/random/200x200" alt="sample image" />
</div>

如果你也不想或不能改变你的 HTML 标记，那么你将不得不求助于一些 JavaScript：

imgElement.addEventListener('selectstart', () => false);

Answer 4

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