JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<img src="http://www.yourscontent.co.uk/Images/ProductImages/Medium/5018483d-b838-42ff-9646-d0460bc605bd.jpg" alt="Pic" data-eImageSwap="http://www.yourscontent.co.uk/Images/ProductImages/Medium/45940602-3fb5-4e9b-904b-c952edb3de64.jpg" />

JavaScript

// As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.


$('img').hover(function(){
    // onmouseover
    if ($(this).data('eImageSwap') !== ""){
        
        // Only set the original if we need to
        if ($(this).data('eImageSwapOriginal') === undefined){
            // Backup the original src (so you dont have to repeat it)
            $(this).data('eImageSwapOriginal', $(this).attr('src'));
        }
        
        // Set the new image
        $(this).attr('src', $(this).data('eImageSwap'));
        
    }
},function(){
    // onmouseout
    if ($(this).data('eImageSwapOriginal') !== ""){
        // Set the src back to the original 
        $(this).attr('src', $(this).data('eImageSwapOriginal'));
    }
});