Código :
<script type = "text/javascript" language= "javascript">
function cambiarDIV () {
var img1 = "<img src='1.jpg' alt=''/>";
document.getElementById("capa1").innerHTML = img1;
}
function cambiarDIV2 () {
var img2 = "<img src='2.jpg' alt=''/>";
document.getElementById("capa1").innerHTML = img2;
}
function cambiarDIV3 () {
var img3 = "<img src='3.jpg' alt=''/>";
document.getElementById("capa1").innerHTML = img3;
}
function cambiarDIV4() {
var img4 = "<img src='4.jpg' alt=''/>";
document.getElementById("capa1").innerHTML = img4;
}
</script>y en HTML tengo una lista que será la botonera.
Código :
<body> <ul> <li><a href="javascript:cambiarDIV();"> img 1 </a></li> <li><a href="javascript:cambiarDIV2();"> img 2 </a></li> <li><a href="javascript:cambiarDIV3();"> img 3 </a></li> <li><a href="javascript:cambiarDIV4();"> img 4 </a></li> </ul> <div id="capa1"></div> Y llama a la función definida en Javascript. Lo que no se ya es como podría hacer un efecto fadeout o un fundido al cambiar de foto. ¿Alguna idea? Gracias!
(Estoy aprendiendo un montón!) me encuentro con un problema ahora, la primera imagen si me hace el efecto fade que buscaba, pero creo que al ser window.onload sólo me lo hace con la primera imagen cargada. Este es el código del Script que he utilizado.