JSFiddle - React, Tailwind, and code Playground

by fliptheweb

HTML

<ul>
    <li><a rel="demo1" class="imgflash" href="#">demo1</a></li>
    <li><a rel="demo2" class="imgflash" href="#">demo2</a></li>
    <li><a rel="demo3" class="imgflash" href="#">demo3</a></li>
</ul>
<div id="imgwrap" style="width:300px; height:300px; overflow:hidden;">
<img rel="demo1" src="../img/logo.png">
<img rel="demo2" src="../img/logo.png">
<img rel="demo3" src="../img/logo.png">
</div>

JavaScript

$('#imgwrap img').hide();

//Create variables for Link & Images
$('a.imgflash').mouseover(function(){
    var linkRel = $(this).attr('rel');
    $('#imgwrap img[rel='+linkRel+']').show();
});