JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<table id="tbl">
    <tr>
        <td>
            &nbsp;
        </td>
        <td>
            <img id="hom" src="http://png-2.findicons.com/files/icons/1261/sticker_system/128/home.png" />
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            <img id="swr" src="https://cdn1.iconfinder.com/data/icons/ecommerce-and-business-icon-set/256/software.png" />
        </td>
        <td>
            <img id="lgo" src="http://graph.facebook.com/1671019266/picture?type=large" />
        </td>
        <td>
            <img id="frm" src="http://wespenre.com/graphics/forum-icon.png" />
        </td>
        <td>
        </td>
    </tr>
    <tr id="tr2">
        <td>
            &nbsp;
        </td>
        <td>
            <img id="abt" src="http://png-3.findicons.com/files/icons/730/soft/128/info.png" />
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
</table>

CSS

td{
    width:200px;
}
img{
    max-width:100%;
}

JavaScript

/*
    See these posts:
    http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery
    
*/

var img_logo = $('#lgo');
$('img').hover(
    function() {
        var xx = $(this).attr('src');
        img_logo.attr('src', xx);
    },
    function() {
        img_logo.attr('src', "http://graph.facebook.com/1671019266/picture?type=large");
    }
);