Build-a-Board Preview

gistfile1.html

<style>
div.innerpreview
{
	height: 350px;
	width:  350px;
	position: float;
	background-color:white;
	border: 1px solid #E3E3E3;
	border-radius: 5px 5px 5px 5px;
	/* Rotate div */
	transform:rotate(270deg);
	-ms-transform:rotate(270deg); /* Internet Explorer */
	-moz-transform:rotate(270deg); /* Firefox */
	-webkit-transform:rotate(270deg); /* Safari and Chrome */
	-o-transform:rotate(270deg); /* Opera */
}
div.outerpreview
{
    left: 16px;
    position: absolute;
    top: 115px !important
}
div.board
{
    position: absolute;
    top: 22px;
    left: 8px
}
p.preview
{
	margin: 10px 7 0 0;
	line-height: 18px;
	font-size: 20px;
	color: #444444;
}
p.notes
{
    color: #444444;
	line-height: 18px;
    font-size: 12px;
    margin-top: -11px;
}
</style>

<div class="outerpreview">
	<div class="innerpreview">
		<div class="board">
			<!-- Piece One-->
			<div style="left: 0px; top: 30px; position: absolute;">
				<div id="piece1" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1; border-radius: 10px 10px 0px 0px;" title="piece1" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece1.png" alt="" width="315" height="30" />
				</div>
				
			</div>
			<!-- Piece Two-->
			<div style="left: 0px; top: 60px; position: absolute;">
				<div id="piece2" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece2" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece2.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Three-->
			<div style="left: 0px; top: 90px; position: absolute;">
				<div id="piece3" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece3" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece3.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Four-->
			<div style="left: 0px; top: 120px; position: absolute;">
				<div id="piece4" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece4" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece4.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Five-->
			<div style="left: 0px; top: 150px; position: absolute;">
				<div id="piece5" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece5" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece5.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Six-->
			<div style="left: 0px; top: 180px; position: absolute;">
				<div id="piece6" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece6" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece6.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Seven-->
			<div style="left: 0px; top: 210px; position: absolute;">
				<div id="piece7" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece7" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece7.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Eight-->
			<div style="left: 0px; top: 240px; position: absolute;">
				<div id="piece8" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece8" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece8.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Nine-->
			<div style="left: 0px; top: 270px; position: absolute;">
				<div id="piece9" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece9" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece9.png" alt="" width="315" height="30" />
				</div>
			</div>
			<!-- Piece Ten-->
			<div style="left: 0px; top: 300px; position: absolute;">
				<div id="piece10" style="visibility: visible; position: absolute;">
					<img style="left: 10px; top: -28px; position: absolute; z-index: 1;" title="piece10" src="http://jettedesigns.com/wp-content/uploads/2012/09/piece10.png" alt="" width="315" height="30" />
				</div>
			</div>
		</div>
	</div>
	</br>
	<p class="preview">Preview </p><p class="notes">(the image above will be filled in with the wood of your choice.) </br> NOTE: this feature is still under construction</p>
</div>

script.js

// When the page has loaded
jQuery(function() {
	// For each of the fields
	jQuery(fields).each(function(index) {
		// When the field is changed
		jQuery(this).change(function() {
			// Change the image src to the one we want
			jQuery(component).attr('src', getSrcFor(jQuery(this).val()));
		});
	});
});

// Get the src for our image
function getSrcFor(name) {
	switch(name) {
		case 'wood name 1':
		return 'wood url 1';
		case 'wood name 2':
		return 'wood url 2';
		// etc
		default:
		return 'default wood url';
	}
}