CODEWITHSUNDEEP
javascripthtmlcssimage
taji01
taji01

Reputation: 2615

Toggle Image on Mouse Up - Dragging Image Issue

I'm using JavaScript to toggle between 2 images. I'm using OnClick and MouseDown events to do this.

The MouseDown event switches to the blue bird.

The OnClick is supposed to switch back to the red bird.

The problem is if I hold down then drag the image and let go it doesn't change back to the other image. as if it never fired the onclick event on the image.

Goal: I want to be able to toggle / switch between both of the images even if I accidentally drag the image.

Up Date Since there are a lot of complications toggling between the images using OnClick and MouseUp events. What I used a timer to show the image for 100ms then I would only use one event to handle everything?

enter image description here

function BirdClick() {
  document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";
}

//Mouse-Down
function BirdHit() {
  document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";
}
<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" onclick="BirdClick()" onmousedown="BirdHit()" />

Upvotes: 2

Views: 400

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

  • On mousedown use Event.preventDefault() to prevent the browser drag-selections and other default stuff
  • Use mouseup and mouseleave for the hitEnd

var el = document.getElementById("Bird1");

var onHitStart = function(e) {
  e.preventDefault(); // Prevent selections for drag etc
  el.src = "//i.sstatic.net/v6Rlm.gif";
};
var onHitEnd = function() {
  el.src = "//i.sstatic.net/R4RoF.gif";
};

el.addEventListener("mousedown",  onHitStart);
el.addEventListener("mouseleave", onHitEnd);
el.addEventListener("mouseup",    onHitEnd);
#Bird1 {
  width: 100px;
  height: 100px;
}
<img id="Bird1" src="//i.sstatic.net/R4RoF.gif" />

you can also add el.addEventListener("mouseleave", onHitEnd); to reset the state even if the mouse leaves el

Upvotes: 1

jafarbtech
jafarbtech

Reputation: 7015

Use mousedown and mouseup events to switch between these 2 image between mouse up and down. Also call the getImage1() to get the first image in ondragend andonmouseleave to handle drag event and the double click problem

function getDrag() {
        getImage1();
    }
function getImage1() {
        document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";

    }
	
    //Mouse-Down
    function getImage2() {
        document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";        
    }
<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" ondragend="getDrag()"  onmouseup="getImage1()" onmouseleave="getImage1()" onmousedown="getImage2()" />
<img src="https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif" style="width:0px;height:0px; visibility:hidden;" />

Upvotes: 1

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

You can attach a mouse up event handler to the body to reset the bird to the first one.

document.body.addEventListener('mouseup', setBirdOne, false);

If you don't want the dragging of the image you can add ondragstart="return false" to prevent it.

UPDATE

Maybe is better to switch back to the first bird when your pointer leaves the image. That can be achieved with:

onmouseleave="setBirdOne()"


function setBirdOne() {
  document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";
}

function setBirdTwo() {
  document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";        
}	

document.body.addEventListener('mouseup', setBirdOne, false);
<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" ondragstart="return false" onmouseleave="setBirdOne()" onmousedown="setBirdTwo()" />

Upvotes: 1

Related Questions