javascript - 将图像制作为按钮且不可下载

Question

我想制作一个无法通过右键单击和“另存为”下载的图像按钮。

我还有一个悬停 javascript，可以更改图像。

我尝试了 CSS:

pointer-events: none;

但如果我这样做，当我将鼠标悬停在它上面时图像不会改变。

我的悬停 Javascript:

function hoverButton(element, src) { 
  element.setAttribute('src', src);
}

function unhoverButton(element, src) {
  element.setAttribute('src', src);
}

在我的图片 html 中:

<a href="../login/"><img class="headButton" src="img/loginBtn.png" onmouseover="hoverButton(this, 'img/loginBtnDark.png');" onmouseout="unhoverButton(this, 'img/loginBtn.png');"></a>

我知道它有点长，但它完成了工作。

我还尝试使用一些 javascript 使按钮图像无法通过右键单击下载。

$('img').mousedown(function (e)) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}

有人知道我必须做什么吗？

Answer 1

这里有一个选项，使用 background-image 而不是 img，这意味着用户无法右键单击以保存图像。

仍然可以获取图像，只是不能通过右键单击。

button {
  background-image: url(https://via.placeholder.com/150);
  background-size: cover;
  background-position: center;
  width: 150px;
  height: 150px;
}

button:hover {
  background-image: url(https://via.placeholder.com/150?text=Alternate);
}

<button></button>