Try-it-on experiment

HTML

<div id="try-container">
    <div id="colors">
    </div>
    <div id="display">
    </div>
    <div id="options">
    </div>
    
    <div id="assets">
        <img class="red" src="http://placedog.com/200/350" />
        <img class="pink" src="http://placedog.com/200/350" />
    </div>
</div>

CSS

#try-container {border: 1px solid black; width: 940px; min-height: 600px;}
#colors {margin: 2px; border: 2px solid black; width: 272px; min-height:594px; display: inline-block; background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC);}
#display {margin: 2px; border: 2px solid black; width: 340px; min-height:594px; display: inline-block; ba/ckground-image: -webkit-linear-gradient(top, #FFFFFF, #EEEEEE); background: url(http://placedog.com/340/594) top left no-repeat;}
#options {margin: 2px; border: 2px solid black; width: 289px; min-height:594px; display: inline-block; background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC);}


#colors .colorbox {height: 39px; width: 39px; backg/round: white; margin: 2px; float: left; border: 1px solid black;}

#assets img {display: none;}
.showme {display: block; z-index: 999; position: absolute; border: 2px solid black;}

JavaScript

var number_of_colors = 1;
//getting the position of the display element
var the_position = $("#display").position();
var the_elementheight = $("#display").height();



//converting the margin string to a number
var the_leftnumberedmargin = parseInt($("#display").css('margin-left'));
var the_topnumberedmargin = parseInt($("#display").css('margin-top'));

//adding the margins to form the new position (need to add border values)
the_offset = new Object();
the_offset.top = (the_position.top + the_elementheight) - 350; //350px is the current static px height of the img
the_offset.left = (the_position.left + the_leftnumberedmargin);

the_position.left = the_position.left + the_leftnumberedmargin;
the_position.top = the_position.top + the_topnumberedmargin;

//Boxes of color are automatically generated - will be replaced by Drupal view
while (number_of_colors <= 78) {
    //console.log(number_of_colors);
    $("#colors").append("<div class=\"colorbox" +" "+"box" + number_of_colors + "\"></div>");
    $("#colors .colorbox").css({"background": "green","background-image": "url(http://placedog.com/39/39)"});
    //console.log("box placed");
    number_of_colors ++;
}

$("#colors div.colorbox").bind('click', function() {
    $("#assets img").toggle().addClass("showme");
    $("#assets img").css({'left': function(){return the_offset.left;}, 'top':function(){return the_offset.top;}});
    //$("this").show().addClass("showme");
    //$("#assets img").toggle().addClass("showme");
});