JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<img id='box' src='' />

CSS

#box{
    
    width:250px;
    height:250px;
    background-color:black;

}

JavaScript

var images=new  Array ('https://www.gravatar.com/avatar/8a5b9d17248e0a9b953c0d5b94a9f2cb?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/7512241adf8b7fb3e19c19c06f775ee3?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/de2ea38f6a28646832eafb034951a982?s=128&d=identicon&r=PG');

var counter=0;
$('#box').hover(function(){
 for(var i=0;i<images.length;i++)
     if(counter==i) $(this).attr('src',images[i]);
 counter++;
 if(counter==images.length) counter = 0 ;
})