Changing an image while click is held

Question

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.

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

The "click" event happens as a result of a mousedown/mouseup pair. — Pointy, Jun 07 '17 at 13:37
remove onclick event if you want to work with mouseup event. — Kousher Alam, Jun 07 '17 at 13:40
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. — Nathan Wilson, Jun 07 '17 at 13:46
@NathanWilson I dont think you need javascript for that, you could just use css :active — nick zoum, Jun 07 '17 at 13:47

nick zoum · Answer 1 · 2017-06-07T14:07:25.627

Simple solution

.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>

Remove select and drag effect

.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>

Smooth transition

.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>

If you want you could give classes to the images like base-img and active-img

So you could replace the :first-child with .base-img and :last-child with .active-img

rickvdbosch · Accepted Answer · 2017-06-07T14:20:08.147

2

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

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

edited Jun 07 '17 at 14:20

answered Jun 07 '17 at 13:50

rickvdbosch

14,105
2
40
53

Thanks, this is exactly what I was looking for and works great! However with it being an `id` and not a `class` it all moves over to the right slightly. And if changed to a `class` the button press doesn't work, any ideas? – Nathan Wilson Jun 07 '17 at 14:06
The id is only needed to identify the element in the JS, and has no impact on the way these elements are rendered. You can also use a ```name``` or ```class``` to identify the image element you want to change the src for, but that would change the JS needed. – rickvdbosch Jun 07 '17 at 14:08
@RickvandenBosch the downside with this is that you change the src of the image all the time. So if the image doesn't get cached you will have to load it again after every event. Moreover the second image will not even start getting loaded until it's pressed. – nick zoum Jun 07 '17 at 14:16
I agree... It's showing how it could work in principle. 'cause normally I would advise to use CSS (and maybe stitched images) to accomplish this effect. – rickvdbosch Jun 07 '17 at 14:19
Thanks for updating – nick zoum Jun 07 '17 at 14:21
Great help/adive from everyone, thanks. I've decided to take what you said and work through this in CSS and the results are great. – Nathan Wilson Jun 07 '17 at 15:15

Changing an image while click is held

2 Answers2

Simple solution

Remove select and drag effect

Smooth transition

Linked