How can I change image source in a div on mouse move with jquery?

Question

I'm trying to teach myself how to code (especially websites). I have a good knowledge of html and css and I'm currently learning js. But know I need the help of the community to make progress!

I am wondering how to achieve this effect of changing image source multiple times (in order) on every mouse move? exemple: http://next2nothi.ng/

After few searches I am not able to find the good solution to achieve that…

Thanks in advance for your help!

Answer 1

Try

let list=[...Array(20)].map((x,i)=>`https://picsum.photos/150/150?image=${i}`);
let index=0;

document.addEventListener("mousemove", function(){
  document.getElementById("myImg").src = list[ ++index % list.length];  
});

<img id="myImg" width="150px" heigh="150px" >