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!