按住单击时更改图像

Question

我希望从按住单击时更改按钮的图像，然后在单击释放时更改回来。我目前有一个平面图像，我希望它变成一个带有内阴影的图像，使它看起来像一个按钮按下，但是当鼠标点击被释放时又变回原来的平面图像。我试过 onmouseup 但我认为我使用不正确。我希望"item" 和"item2" 在单击时保留其图像，并且可以正常工作。但是，我希望 "item3" 在鼠标释放后变回，或者在被点击后立即变回。

（编辑：我是 JavaScript 新手，它不一定是 onmouseup 解决方案。如果有人可以解释如何创建一个执行此操作的函数，那就太好了。）

JS：

var onImgStp= "images/stop.png";
var onImgPnk= "images/pink.png";
var onImgMut= "images/mute.png";
var offImg= "images/green.png";
var offImgStp= "images/stop2.png";

HTML：

<img class="item" src="images/pink.png" onclick="manage(1); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(2); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(3); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(4); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(5); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(6); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(7); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(8); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item2" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<img class="item3" src="images/stop.png" onmouseup="this.src = (this.src.endsWith(offImgStp)? onImgStp : offImgStp);"/>

Answer 1

简单的解决方案

.image-swap {
  cursor: pointer;
}

.image-swap>img, .image-swap:active>img:first-child {
  display: none;
}

.image-swap>img:first-child, .image-swap:active>img:last-child {
  display: block;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

移除选择拖拽效果

.image-swap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
}

.image-swap>img {
  pointer-events: none;
  display: none;
}

.image-swap>img:first-child {
  display: block;
}

.image-swap:active>img:first-child {
  display: none;
}

.image-swap:active>img:last-child {
  display: block;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

平滑过渡

.image-swap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  position: relative;
}

.image-swap>img {
  pointer-events: none;
  transition: all 0.6s;
  position: absolute;
  opacity: 0;
  left: 0;
}

.image-swap>img:first-child {
  position: static;
  opacity: 1;
}

.image-swap:active>img:first-child {
  opacity: 0;
}

.image-swap:active>img:last-child {
  opacity: 1;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

如果你愿意，你可以给像base-img和active-img这样的图片上课

因此，您可以将 :first-child 替换为 .base-img 并将 :last-child 替换为 .active-img

Answer 2

看看这个非常简单的概念证明解决方案（基于您的问题和 cmets）：

function mousedown() {
  var el = document.getElementById("image01");
  el.setAttribute("src", "http://blog.fantasy.co/wp-content/uploads/2013/02/feature_Net.jpg")
}

function resetImage() {
  var el = document.getElementById("image01");
  el.setAttribute("src", "https://camo.githubusercontent.com/b87a252140848659b80b0d2297e32dc62afee0cf/68747470733a2f2f646f63732e6d6963726f736f66742e636f6d2f656e2d75732f646f746e65742f61727469636c65732f696d616765732f6875622f6e6574636f72652e737667")
}

<img id="image01" src="https://camo.githubusercontent.com/b87a252140848659b80b0d2297e32dc62afee0cf/68747470733a2f2f646f63732e6d6963726f736f66742e636f6d2f656e2d75732f646f746e65742f61727469636c65732f696d616765732f6875622f6e6574636f72652e737667" alt="image" onmousedown="mousedown()" onmouseup="resetImage();" onmouseleave="resetImage();" />

通常我会建议使用 CSS（如果您仍然需要多个图像，也可以使用拼接图像）来实现此效果。