JSFiddle - React, Tailwind, and code Playground

by djwave28

HTML

<div id="MainContainer">
    <div id="MainImage"></div>
    <div id="TNBodyContainer">
        <div id="TNOne"></div>
        <div id="TNTwo"></div>
    </div>

CSS

#MainContainer {
			    position: relative;
			    margin: 0 auto;
			    width: 500px;
			    height: 400px;
			    border: 1px solid black;
			}
			#MainImage {
			    position: relative;
			    margin: 10px auto 0 auto;
			    width: 398px;
			    height: 265px;
			    background: url();
			    border: 1px solid black;
			}
			#TNBodyContainer {
			    position: relative;
			    margin: 10px auto 0 auto;
			    border: 1px solid black;
			    width: 268px;
			    height: 88px;
			}
			#TNOne {
			    position: relative;
			    float: left;
			    width: 133px;
			    height: 88px;
			    background: url("http://www.zenimax.com/jpn/fallout3/images/avators/80x80falloutav-vb.gif") no-repeat center;
			}
			#TNTwo {
			    position: relative;
			    left: 0;
			    top: 0;
			    float: right;
			    width: 133px;
			    height: 88px;
			    background: url("http://www.libpng.org/pub/png/img_png/linux_logo_sample.png") no-repeat center;
			}

JavaScript

function setImage(e) {
       var clicksourse = e.target.id;

       switch (clicksourse) {

           case "TNOne":
               document.getElementById("MainImage").style.background = "url(http://www.zenimax.com/jpn/fallout3/images/avators/80x80falloutav-vb.gif)";
               break;
           case "TNTwo":
               document.getElementById("MainImage").style.background = "url(http://www.libpng.org/pub/png/img_png/linux_logo_sample.png)";
               break;
       }


   }
   window.onload = function () {

       document.getElementById("TNOne").addEventListener("click", function (e) {
           setImage(e);
       }, false);
       document.getElementById("TNTwo").addEventListener("click", function (e) {
           setImage(e);
       }, false);

   }