Search code examples
javascripthtmlbuttonbackground-imagemousedown

Javascript/jQuery - Change input button the background image when mouse down and up

I want to change input button the background image when mouse down and up, but it don't work.

enter image description here

function mousedown() {
  document.getElementById("enlarge_btn").style.backgroundImage = "url(../picture/image2.svg)";
}

function mouseup() {
  document.getElementById("enlarge_btn").style.backgroundImage = "url(../picture/image1.svg)";
}
.button_img {
  width: 36px;
  height: 36px;
  background-image: url(../picture/image1.svg);
  background-color: transparent;
  background-size: cover;
  border: none;
  cursor: pointer;
}
<input id="enlarge_btn" type="button" name="button" class="button_img" onmousedown="mousedown()" onmouseup="mouseup()">

Where can I fix?

Please help me, thanks!

Solution

  • I find if I change

    document.getElementById("enlarge_btn").style.backgroundImage = "url(../picture/image2.svg)";

    to

    document.getElementById("enlarge_btn").style.backgroundImage = "url(picture/image2.svg)";

    It works, so the problem is file path.

    Thanks.