estoy usando este codigo para cambiar una imagen en pantalla dependiendo de la opcion que elija. Pero ahora lo quiero complicar un poco mas. La imagen dependera de dos opciones un numero y un color. El nombre de los archivos seria: uno_rojo.jpg, uno_azul.jpg, dos_rojo.jpg, dos_azul.jpg, etc.
Cuando hago la function intercambio(color,listado,imagen) tendria que pasar un parametro mas para el color.
Y a cuando genero el nombre del archivo seria: document.getElementById(imagen).src=this.value+"co lor"+'.jpg';
donde this.value es la variable "listado" lo que no me doy cuenta es como llamar a la variable "color".
deberia ser this.value[color] y this.value[listado] ??
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "****://***.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>intercambiar un imagen con un select</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
</style>
<script type="text/javascript">
function intercambio(lista,imagen) {
document.getElementById(lista).onchange=function() {
document.getElementById(imagen).src=this.value+'.jpg';
}
}
window.onload=function() {intercambio('numeros','imagen')}
</script>
</head>
<body>
<form method="post" action="#">
<p><select id="numeros">
<option value="uno">uno</option>
<option value="dos">dos</option>
<option value="tres">tres</option>
<option value="cuatro">cuatro</option>
<option value="cinco">cinco</option>
</select>
<img id="imagen" src="uno.jpg" alt="numero" />
</form>
</body>
</html>