JSFiddle - React, Tailwind, and code Playground

by Ayadi Baha Eddine

HTML

<img id="test">

CSS

img{
    width:250px;
    height:250px;
}

JavaScript

$(document).ready(function(){
    var initial ='https://pbs.twimg.com/profile_images/587778453937618944/-z_faB4f.jpg';
    var hovering = 'http://www.gettyimages.fr/CMS/Pages/Embed_Frontdoor/StaticContent/hero_travel_482206371.jpg';
    var clicking = 'http://www.menucool.com/slider/prod/image-slider-2.jpg';
    $('#test')
    .attr('src',initial)
    .hover(function(ev){
        $(this).attr('src',hovering);
    })
    .mousedown(function(ev){
        $(this).attr('src',clicking);
    })
    .mouseup(function(ev){
        $(this).attr('src',initial);
    })
    .mouseout(function(ev){
        $(this).attr('src',initial);
    });
});