Help with a few things + first post here!

[ricdelo]

Hi! I am VERY new to JS, I have only done a little bit of coding for game dev in a few codes. I am rusty though, since I haven’t done much since the summer.

I wanted to help a friend out with their website, and I keep exploring possibilities with JS, but I’m finding it getting all jumbled in my mind.

I am trying to make it so that there is a single gif image, then when the move is over the image (I believe I would use onmouseenter (?)) it plays one loop of an in between gif, then it goes straight to the middle image. THEN on mouse out, I want it to play that inbetween image, and return to the first static gif image.

I am so sorry if that makes absolutely no sense…

Thanks in advance

[markbrown4]

<img id="my-image" src"="image-1.gif">
<script>
img = document.querySelector('#my-image')
img.onmouseenter = function() {
  img.src = 'image-1-hover.gif'
}
img.onmouseleave = function() {
  img.src = 'image-1.gif'
}
</script>

Though, you might want to consider CSS for it’s simplicity here, the difference is using background-image on a div rather than a img:

#my-image {
  background-image: url('image-1.gif')
  width: 100px;
  height: 100px;
}
#my-image:hover { background-image: url('image-1-hover.gif') }