Creare imagine dinamica din doua parti combinate
Scris: Joi Iun 05, 2014
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!
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>