时间戳

首页 > 解决方案 > 将图像设为按钮且不可下载

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

问题描述

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

我也有一个悬停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!
  }
}

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

标签： javascripthtmlcss

解决方案

这是一个选项，使用 abackground-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>

推荐阅读