Keep gif for a while after removing the mouse

Asked

Viewed 113 times

3

Good morning, my problem is this: I have a gif of a Bulbasaur and I want that when I pass the mouse on top of it the gif change to another, but when I finish the animation of 2°; gif I want it to automatically go back to 1°, has how to do this since gif keeps rebooting itself?

My code: 

    <style> 
        img{
            width: 6%
        }
    </style>
</head>

<body>
   <img src="Bulbasaur_XY.gif" id="i"> 

   <script>
       var imagem = document.getElementById('i')
       imagem.addEventListener('mouseenter', entrar)
       imagem.addEventListener('mouseout',sair)

       function entrar(){
        document.getElementById('i').src="Bulbasaur_XY_AttackAnimation_Sprite (1).gif"
       }
       function sair(){
        document.getElementById('i').src="Bulbasaur_XY.gif"
       }
   </script>
</body>

Link to the gifs: 1° gif = https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443

2° gif = https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732

I also wanted to know if there is how to get the 2 gif of the msm size, since the first and width of each is different and I am using the img msm tag.

javascript html
  • 1

    Daniel, some information is missing from your question. What happens if the mouse exits the element in the middle of the 2nd GIF execution? And if the mouse is repeatedly entering and exiting the element?

  • 1

    @Daniel Lucas About the image size this article: https://www.w3schools.com/tags/att_img_width.asp

  • @fernandosavio what I want is that when the mouse passes in element 1 it goes to element 2, only that until the end of the animation of element 2 the mouse events are impossible to happen

2 answers

4


To be quite honest, I don’t know if it’s possible to identify the period of animation of a gif. I would like the most experienced people in the community to address this issue.

And another thing... I believe that to maintain a visual pattern on your page the images must have the same size and animation time. And from these two criteria it is possible to use a simple function as the setTimeout.

See how the difference in size between the images and the animation time influences the final result

const pokemons = document.getElementsByClassName('pokemon');

function animatedPokemon() {
  const image = this;
  const src = image.dataset.src;
  const dataHover = image.dataset.hover;
  image.src = dataHover;

  setTimeout(function() {
    image.src = src
  }, 1900);
}

for (let i = 0; i < pokemons.length; i++) {
  pokemons[i].addEventListener('mouseover', animatedPokemon);
};
img {
  border: 1px solid black;
}
<img class="pokemon" src="https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443" data-src="https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443"
  data-hover="https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732">

<img class="pokemon" src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/abra-2.gif" data-src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/abra-2.gif" data-hover="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/23ddfd0a-6934-4f06-9fa9-8be687766403/d81zxe8-ef67d1cf-fddc-4c62-9e61-13af794d876d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzIzZGRmZDBhLTY5MzQtNGYwNi05ZmE5LThiZTY4Nzc2NjQwM1wvZDgxenhlOC1lZjY3ZDFjZi1mZGRjLTRjNjItOWU2MS0xM2FmNzk0ZDg3NmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O17RaDSNgsm86-CK5mxNkkeUkyrygiyF0uOyz_rdwas">

  • Aaaa thanks dmais, rode mt behind a function or something but only found some things in java and n in javascript, you know if there are any programs that adjust the width and height of these gifs to be equal ?

  • I know almost nothing about image manipulation... I’ll try to find something and tell you :)

  • 1

    Blz, thank you again :)

  • you can explain to me what is this 1900 no : setTimeout(Function() { image.src = src }, 1900); }? I didn’t really understand what it is for

  • Of course. The function setTimeout executes the function passed in the first parameter after the time (in milliseconds) that was defined in the second parameter, i.e., the number 1900 is the amount of time the function "will wait" to run. So, if your gif has a total duration of 2 seconds until it starts repeating again, you can change the value to 2000 millisecond (2 seconds).

2

Response based on @Victorcarnaval

To get an image of the same size you have to get a program like Photoshop and create a gif of the same size (which in this case is the attack animation). You can’t just change the height and width gif because it will simply stretch the image and does not fit the transition.

Create an image of the same size to see how it looks and also hit the setTimeout for the animation to end at the exact moment.

const pokemons = document.getElementsByClassName('pokemon');

function animatedPokemon() {
  const image = this;
  const src = image.dataset.src;
  const dataHover = image.dataset.hover;
  image.src = dataHover;

  setTimeout(function() {
    image.src = src
  }, 1530);
}

for (let i = 0; i < pokemons.length; i++) {
  pokemons[i].addEventListener('mouseover', animatedPokemon);
};
img {
  border: 1px solid black;
}
<img class="pokemon" src=https://i.ibb.co/DR0vdyN/Bulbasaur-XY-resized.gif" data-src="https://i.ibb.co/DR0vdyN/Bulbasaur-XY-resized.gif"
  data-hover="https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732">

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.