JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="photo"></div>
<div id="photox"></div>
<div id="photoy"></div>
<div id="photoz"></div>
<div id="clear">Clear</div>

CSS

div{border:thin solid #F00;}
#photo,#photox,#photoy,#photoz{display:inline-block;}
#photo{
    margin:5px;
    background-repeat:no-repeat;    
    width:100px;
    height:100px; 
    cursor:pointer; 
}
#photox{
    margin:5px;
    background-repeat:no-repeat;    
    width:50px;
    height:50px; 
    cursor:pointer; 
    background-size:contain;
}
#photoy{
    margin:5px;
    background-repeat:no-repeat;    
    width:200px;
    height:200px; 
    cursor:pointer; 
}
#photoz{
    margin:5px;
    background-repeat:no-repeat;    
    width:50px;
    height:50px; 
    cursor:pointer; 
}
#clear{
    width:35px;
    margin:5px;
    cursor:pointer; 
}

JavaScript

$('#photo, #photox').live('click',function(){
    $(this).css('background-image','url(http://phonebook.x10.mx/Joker.gif)');
});

$('#photoy,#photoz').live('click',function(){
    $(this).html('<img src="http://phonebook.x10.mx/Joker.gif"/>');
    var x = $(this).find('img').height();
    
    $(this).css('height',x);
    $(this).css('width',x);
});

$('#clear').live('click',function(){
    $('#photo, #photox').css('background-image','');
    $('#photoy, #photoz').empty();
});