Creare imagine dinamica din doua parti combinate

[adrian_ady]

Salut,
cum se face corect un script pentru a obtine o imagine dinamica?
Am o imagine de exercitiu, numita v1

Am divizat-o in doua, partea cu acoperisul, a1.png

si cea care contine corpul, c1.png

Variante(culori) pentru acoperis sunt 3 (a1.png, a2.png, a3.png), deasemenea pentru corp (c1.png, c2.png, c3.png). Aceste variante vreau sa poata fi combinate intre ele asa incat sa rezulte mai multe optiuni de finisaje; in acest sens m-am gandit sa existe doua select-uri, unul pt. acoperis si celalalt pentru corp, cu optiunile respective.
Ce ziceti?
------------------
Edit:
Am rezolvat!

Cod: Selectaţi tot

<table width="250" height="143" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img id="acoperis" src="a1.png" />
</td><td>
<select id="lista-acoperis" onChange="swapImageAcoperis()">
<option value="a1.png">A1</option>
<option value="a2.png">A2</option>
<option value="a3.png">A3</option>
</select>

<script type="text/javascript">
function swapImageAcoperis(){
	var image = document.getElementById("acoperis");
	var dropd = document.getElementById("lista-acoperis");
	image.src = dropd.value;	
};
</script>

</td>
</tr><tr>
<td><img id="corp" src="c1.png" />
</td><td>
<select id="lista-corp" onChange="swapImageCorp()">
<option value="c1.png">C1</option>
<option value="c2.png">C2</option>
<option value="c3.png">C3</option>
</select>

<script type="text/javascript">
function swapImageCorp(){
	var image = document.getElementById("corp");
	var dropd = document.getElementById("lista-corp");
	image.src = dropd.value;	
};
</script>

</td>
</tr></table>