按住点击时更改图像 [英] Changing an image while click is held

问题描述

我希望从单击时开始更改按钮的图像，然后在单击释放时重新更改按钮的图像.我目前有一个平面图像，我希望将其更改为带有内部阴影的图像，以使其看起来像按一下按钮，但在释放鼠标单击时又变回原始的平面图像.我尝试了onmouseup，但我认为使用不正确.我希望"item"和"item2"在单击时保持其图像，并且可以正常工作.但是，我希望"item3"在释放鼠标时变回原状，或者只是在单击后立即变回原状.

I am looking to change an image of a button from when a click is held, then change back upon click release. I currently have a flat image, and I want it to change to one with an inner-shadow to make it look like a button press, but change back to the original flat image when the mouse click is released. I tried onmouseup but I think i'm using it incorrectly. I want the "item" and "item2" to hold their image when clicked, and that works correctly. However I want the "item3" to change back upon mouse release, or just change back instantly after being clicked.

(我是JavaScript的新手，它不一定是onmouseup解决方案.如果有人可以解释如何创建执行此操作的函数，那就太好了.)

( I'm new to JavaScript, it doesn't have to be an onmouseup solution. If someone can explain how to create a function which does this then that would be great.)

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);"/>

推荐答案

看看这个非常简单的概念验证解决方案(基于您的问题和评论):

Have a look at this very simple Proof Of Concept solution (based on your question and the comments):

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 (如果您仍然需要多个，则可以缝合图像)来实现这种效果.

Normally I would advise to use CSS (and maybe stitched images if you still need more than one) to accomplish this effect.

这篇关于按住点击时更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！