JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="one" class="button"></div>
    <div id="two" class="button"></div>
    <div id="three" class="button"></div>
</div>

CSS

#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-image:url("https://dl.dropbox.com/u/20956652/samsung/960x540/speg_background_transporent_2.png");
    background-color:#888;
}

#one,#two,#three{
    position:relative;
    left:98px;
    top:215px;
    width:253px;
    height:168px;
    float: left;
}
#onee{
    left:98px;
}

JavaScript

var tvselected = "https://dl.dropbox.com/u/20956652/samsung/960x540/TV_sel_2.png";
var tv = "https://dl.dropbox.com/u/20956652/samsung/960x540/TV.png";

var vodselected = "https://dl.dropbox.com/u/20956652/samsung/960x540/Vod_sel_2.png";
var vod = "https://dl.dropbox.com/u/20956652/samsung/960x540/Vod.png";

var settingsselected = "https://dl.dropbox.com/u/20956652/samsung/960x540/settings_sel_2.png";
var settings = "https://dl.dropbox.com/u/20956652/samsung/960x540/settings.png";

jQuery(document).ready(function($) {

    $("#three").hide().append("<img src='" + settings + "'/>").fadeIn('slow',
      function(){
           $("#two").hide().append("<img src='" + vod + "'/>").fadeIn('slow',
              function(){
                  $("#one").hide().append("<img src='" + tvselected + "'/>").fadeIn(2000);
              });
      });
    
    

    $(".button").click(function(){     
        
        $("#one img").attr("src",tv );
        $("#two img").attr("src",vod );
        $("#three img").attr("src",settings );
        
        if( "one" == $(this).attr("id") )
            $(this).find("img").hide().attr("src",tvselected ).fadeIn();
        if( "two" == $(this).attr("id") )
            $(this).find("img").attr("src",vodselected );
        if( "three" == $(this).attr("id") )
            $(this).find("img").attr("src",settingsselected );
    });
});