JSFiddle - React, Tailwind, and code Playground

by Jinhui LEE

HTML

<a href="#" class="left-image" data-image="http://myhosting1313.dothome.co.kr/images/b-mash.png">BLACK MASH</a>
<a href="#" class="left-image" data-image="http://myhosting1313.dothome.co.kr/images/g-mash.png">GRAY MASH</a>
<a href="#" class="right-image" data-image="http://myhosting1313.dothome.co.kr/images/orange.png">orange</a>
<a href="#" class="right-image" data-image="http://myhosting1313.dothome.co.kr/images/green.png">green</a>
<div id="main">
  <div><img src="" id="leftImage"></div>
  <div><img src="" id="rightImage"></div>
</div>

CSS

#main { width: 300px; position: relative; }
#main div { width: 100%; position: absolute; top:0; left: 0; }
#main img { width: 100%; }

JavaScript

$(".left-image").on("click", function(e) {
	e.preventDefault();
	$("#leftImage").attr("src", $(this).data("image"));
});

$(".right-image").on("click", function(e) {
	e.preventDefault();
	$("#rightImage").attr("src", $(this).data("image"));
});