cambiar imagen al seleccionar en combo box

yalimna · #1 (**permalink**) 28/10/2010, 20:47

Tengo el siguiente codigo y no se que tengo que corregir para que al hacer click la imagen negra cambie por la seleccionada

gracias!!

Código HTML:

<html>
	<script type="text/javascript">
		function cambiarImagen()
		{
		
			objImagen= document.getElementById("colores");
			alert("hola " + objImagen.value );

			objFondo= document.getElementById("marco");
			
			objFondo.src = tabla.colores.value;	 
			tabla.marco.src= tabla.colores.value;
		}
	</script>
	<body>
		<table id="tabla" name="tabla">
			<tr>
				<td>
					<select id="colores" name="colores"
 onChange="cambiarImagen()">
						<option value="rojo.jpg"> rojo 
						</option>
						<option value="azul.jpg"> azul 
						</option>
						<option value="amarillo.jpg"> 
						amarillo </option>
					</select>
				</td>
				<td>
					<img id="marco" name="marco" 
					src="negro.jpg" />
				</td>
			</tr>
		</table>
	</body>
</html>

ArturoGallegos · #2 (**permalink**) 28/10/2010, 22:36

creo que deberías empezar por declarar un doctype valido.

la propiedad name no es propiamente valida para una tabla, en dado caso el input debes insertarlo en un formulario <form></form>

debería quedar algo como esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Ag666" />
 
    <title>Sin título 1</title>
    
<script type="text/javascript">
    function cambiarImagen(){
        var objImagen = document.getElementById('colores');
        var objFondo = document.getElementById('marco');
        objFondo.src = objImagen.value;
        alert('hola ' + objImagen.value );
    }
</script>    
</head>
 
<body>
<form>
    <select id="colores" name="colores" onchange="cambiarImagen()">
        <option value="rojo.gif">rojo</option>
        <option value="azul.gif">azul</option>
        <option value="negro.gif">negro</option>
    </select>
</form>
 
<img id="marco" src="negro.gif" alt="imagen de prueba" />
 
</body>
</html>