使图像不可选

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

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

我使用了here找到的信息，特别是在我的正文中的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

我会在我的CSS中使用

pointer-events: none;

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://picsum.photos/200/200" alt="sample image" />

---

唯一的缺点是

pointer-events: none

会导致

:hover

、

:active

和其他与指针相关的 CSS 伪类停止工作。

为了解决这个问题，您应该使用

<div>

或其他东西作为

<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://picsum.photos/200/200" alt="sample image" />
</div>

---

如果您也不想或无法更改 HTML 标记，那么您将不得不求助于一些 JavaScript：

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

Answer 4

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