Product preview help

[Fire-Hazard]

Hey im trying to get a product preview for my site, the products are hoodies tshirts and polos
How can i change the image to a hoodie tshirt or polo using a drop down list and still change the colour using another?
I've seen other people do it in flash but I don't really want to use anything other then javascript jquery css and html.

This is the the code that i have at the moment

	<script type="text/javascript">
	    $(document).ready(function(){
		$("#canvas").addClass('default');
	    });

function update()
{
    var color   =	$('#d_color').val();
    var text    =	$('#d_text').val();
    var image   =	$('#d_image').val();

    if( color.length > 0 ){
	    $("#canvas").removeClass('default');
	    $("#canvas").addClass(color);
    }

    if( text.length > 0){
	$("#text").append(text);
    }

    if( image.length > 0){
	$("#image").append('<img class="image" src="images/uploads/' + image + '" />');
    }

    $('#update').hide();
}

The css

	    .default { background-image: url("images/white.jpg"); }
	    .item { width: 500px; height: 470px; border: 1px solid #000; float: left; margin: 20px; display: inline;}
	    .red { background-image: url("images/red.jpg");}
	    .blue { background-image: url("images/blue.jpg");}
	    .orange { background-image: url("images/orange.jpg");}
	    .white { background-image: url("images/white.jpg");}
	    .green { background-image: url("images/green.jpg");}
	    .pink { background-image: url("images/pink.jpg");}
	    .yellow { background-image: url("images/yellow.jpg");}
	    .image { max-width: 180px; margin:0 auto;display:block;margin-top:10px;}
	    #text {width:500px;height:20px;display:block;color:white;font-weight:bolder;text-align:center;margin-top:110px;}
	    .form {margin-top:10px;float:left;}

	<div id="form" class="form">
	    <table border="0" cellspacing="5" cellpadding="5" >
		<tr>
		    <td><label>Name</label></td>
		    <td><input type="text" id="d_name" name="d_name" /></td>
		</tr>
		<tr>
		    <td><label>E-Mail</label></td>
		    <td><input type="text" id="d_email" name="d_email" /></td>
		</tr>
		<tr>
		    <td><label>Contact</label></td>
		    <td><input type="text" id="d_phone" name="d_phone" /></td>
		</tr>
		<tr>
		    <td><label>Color</label></td>
		    <td>
			<select id="d_color" name="d_color">
			<option value="red">Red</option>
			<option value="blue">Blue</option>
			<option value="orange">Orange</option>
			<option value="white">White</option>
			<option value="green">Green</option>
			<option value="pink">Pink</option>
			<option value="yellow">Yellow</option>
			</select>
		    </td>
		</tr>
		<tr>
		    <td><label>Text</label></td>
		    <td><input type="text" id="d_text" name="d_text" /></td>
		</tr>
		<tr>
		    <td><label>Image</label></td>
		    <td>
			<select id="d_image" name="d_image" style="max-width: 150px;">
			    <option value="">Please choose</option>
			    <?php
				foreach( $files as $file )
				{
				    if(!in_array( $file, $ignore ))
				    {
					    echo '<option value=' . $file . '>' . $file . '</option>';
				    }
				}
			    ?>
			</select>
		    </td>
		</tr>
		<tr>
		    <form action="" method="post" enctype="multipart/form-data">
		    <td><label>Upload Image</label></td>
		    <td><input type="file" id="file" name="file" /><input type="submit" id="upload" name="upload" value="Upload" /></td>
		    </form>
		</tr>
		<tr>
		    <td><label>Quantity</label></td>
		    <td><input type="text" id="d_quantity" name="d_quantity" /></td>
		</tr>
		<tr>
		    <td style="vertical-align: top"><input type="checkbox" name="d_remarks" id="d_remarks"><label>Remarks</label></td>
		    <td><textarea cols="30" rows="5" id="d_remarks_value" name="d_remarks_value"></textarea></td>
		</tr>
		<tr>
		    <td>
		    </td>
		    <td><button id="reset" style="display: none;" onClick="reset()">Reset</button>&nbsp;<button id="update" onClick="update()">Update</button>&nbsp;<button onClick="send()">Send Design</button></td>
		</tr>
	    </table>
	</div>

	<div id="canvas" class="item">
	    <div id="text"></div>
	    <div id="image"></div>
	</div>
    </div>