Animate a script that changes the image src

Asked

Viewed 472 times

-1

My question is this: I have in my code 2 JS functions that are called with onmouseenter and onmouseout in my HTML code, which are they:

function passo1() {       
      document.getElementById("imagem").src="imagens/002.png";
  }
function passo2() {
      document.getElementById("imagem").src="imagens/001.png";
  }

The mouseenter event changes the image from 001.png to 002.png (in function Passo1), as the mouseout event changes the image from 002.png to 001.png (in function Passo2), that I descrivi is already working and the images exchange when passing and taking the mouse, the problem is that it gets something "dry", nor has any animation, I wondered if it would be possible to add some kind of animation or transition to these 2 images.

javascript html5 javascript-events
  • 1

    Guy most likely what you are trying to do would give to do easily with CSS... ever thought about it or have to be with JS even?

  • But is it possible for CSS to replace src from an image? because it is not in the background of an element (if so, I know it would be possible to put a Hover and change the background), it is the <img element>

  • 1

    There are several options, you can have 2 images at the same time one above the other, which would be the MOST indicated, because when you change the src, you will have to load the other image, and this can make the image "blink" on the screen for a moment, 'cause it’s gonna be blank while you upload the new image. Having the two of you on top of each other would be fine. The other, more complex option is to have one element with two backgrounds-image, one url() for each image. I believe it is not possible to do "smooth transition" of src, even with JS

  • I liked the idea of having one over the other, I could leave one with a bigger z-index and having the Hover the z-index would decrease, showing the other image, but for them to be on top of the other it would be necessary to mess with position, beyond the top and left.

  • Yes, you would have to use position, and you would actually just leave the image above with opacity:0; you don’t need z-index. But it all depends on the effect you want, if you want in the Hover an image goes out to the right and another one goes in to the left you won’t need position, you could use margin, so it all depends on what you really want... I just think landing is likely that you can make a CRS transition, plus the shipment problem I told you about...

  • 1

    I get it, but thanks, really, I got a good idea of what to do.

Show 1 more comment

1 answer

1

Why not do this with CSS only? Below is how to do it with both modes (with and without javascript).

var ctImg = document.querySelector('.ct-imagem#com-js');

ctImg.onmouseenter = () => {
  ctImg.querySelector('.img.frente').style.opacity = '0';
  ctImg.querySelector('.img.tras').style.opacity = '1';
};

ctImg.onmouseout = () => {
  ctImg.querySelector('.img.frente').style.opacity = '1';
  ctImg.querySelector('.img.tras').style.opacity = '0';
};
.ct-imagem {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 100px;
  overflow: hidden;
}

.ct-imagem .img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 500ms;
}

.ct-imagem .img.frente {
  z-index: 2;
}

.ct-imagem .img.tras {
  z-index: 1;
  opacity: 0;
}

.ct-imagem#sem-js:hover .img.frente {
  opacity: 0;
}

.ct-imagem#sem-js:hover .img.tras {
  opacity: 1;
}
<h1>Sem javascript/CSS</h1>
<div class="ct-imagem" id="sem-js">
  <img class="img frente" src="https://wallpapercave.com/wp/wp4302732.jpg">
  <img class="img tras" src="https://www.iwantwallpaper.co.uk/images/muriva-quadra-stone-cube-pattern-wallpaper-3d-effect-square-textured-vinyl-l50501-p5056-13928_image.jpg">
</div>
<h1>Com javascript</h1>
<div class="ct-imagem" id="com-js">
  <img class="img frente" src="https://wallpapercave.com/wp/wp4302732.jpg">
  <img class="img tras" src="https://www.iwantwallpaper.co.uk/images/muriva-quadra-stone-cube-pattern-wallpaper-3d-effect-square-textured-vinyl-l50501-p5056-13928_image.jpg">
</div>

Browser other questions tagged javascript html5 javascript-events

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