Cambiar imagen y capa en onclick y onmouseover

coke_135 · #1 (**permalink**) 14/12/2008, 10:07

Hola a todos.

No soy muy experto en javascript pero me gustaría conseguir un efecto combinando varias cosas.

Deseo hacer un menu en el que tenga una imagen original, al pasar el raton por encima esta cambie por otra y al hacerle click, la imagen cambia por una tercera y además cambia una capa de la página con un contenido diferente.

Creo haberlo conseguido (o eso creo). Os pego el código:

Código HTML:

<html>
	<head>
    
    <script>
		var capas = ["1", "2"];
		function cambiarimg(capa, nueva){
			 	document.getElementById('acambiar').src=nueva;
				document.getElementById('acambiar').onmouseover=false;
				document.getElementById('acambiar').onmouseout=false;
				document.getElementById('acambiar').style.cursor="default";
				for (i = 0, total = capas.length; i < total; i ++)
					document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
		}
	</script>
    
    <style type="text/css">
		.invisible {display: none;}
		#acambiar {cursor: pointer;}
	</style>
    
        
    
    </head>
    
    <body>
    	<img src="img/2.jpg" id="acambiar" onmouseover="this.src='img/1.jpg'" onmouseout="this.src='img/2.jpg'" alt="rollover" onclick="cambiarimg('2','img/3.jpg')"/>
        
	<div id="1">Uno</div>
        <div id="2" class="invisible">Dos</div>
    
    </body>
</html>

Lo he escrito combinando código que he ido encontrando por el foro y creo que funciona, pero me gustaría que me dijerais si se puede mejorar, si veis una forma mejor de hacerlo o si creeis que tiene algún error.

¡Gracias!

coke_135 · #2 (**permalink**) 14/12/2008, 10:54

Me contesto a mi mismo.

He encontrado dos problemas:

- El script no funciona correctamente en IE :(. Solo hace el mouseover pero no cambia la tercera imagen ni la capa.
- El menu tiene 5 elemntos y al hacer click en uno, cambia la imagen correctamente y la capa a mostrar. Pero claro, al hacer click en otro elemento del menu, el elemento cambaido anteriormente debería volver al estado inicial... ¿Puedo guardar el estado inicial de alguna forma y "reseteralo" cuando haga click en otro?

Gracias otra vez.

coke_135 · #3 (**permalink**) 15/12/2008, 05:19

Ya he solucionado lo del Explorer. Solamente he cambiado el "false" por "null" y funciona correctamente:

document.getElementById('acambiar').onmouseout=fal se;

por

document.getElementById('acambiar').onmouseout=nul l;

A ver si me podéis ayudar con el resto :).