Skript para cambio de imágenes

Skineriano · #1 (**permalink**) 26/11/2002, 11:48

Hola a todos:

No tengo apenas conocimientos de JavaScript, pero estoy haciendo webs y he aprendido que son muy útiles. Además este es mi primer mensaje en el foro. A ver que tal me sale.

Necesitaría que alguien me explicase cómo hacer lo siguiente:

Quiero crear una web con tres imágenes en la parte superior y una en la inferior, y que la inferior vaya cambiando en función de en cual de las superiores se sitúe el ratón.

¿Alguien sabe dónde puedo conseguir este Script?

Gracias a todos!. Un saludo!.

caricatos · #2 (**permalink**) 26/11/2002, 12:40

Hola Skineriano:
y bienvenido a los foros...

Voy a tratar de decirtelo de memoria.
la imágen de abajo tiene que tener un atributo id, por ejemplo
<img src=inicio.gif id=cambiante>
luego si la quieres cambiar por las de arriba, tienes que poner en el tag de las de arriba algo así:
<img src=xxx.gif onmouseover="document.getElementById('cambiante'). src=this.src" onmouseout="document.getElementById('cambiante').s rc=xxx.gif">
y lo mismo en la otra imagen.

Espero haberte servido.
Saludos

chivi · #3 (**permalink**) 26/11/2002, 13:07

Wenas!
Si también es de tu ayuda, acá te hice ésto:

<html>
<head>
<script language="javascript">
imagen1=new Image()
imagen1.src="imagen_izq.jpg"
imagen2=new Image()
imagen2.src="imagen_ctr.jpg"
imagen3=new Image()
imagen3.src="imagen_der.jpg"
imagen_abajo=new Image()
imagen_abajo.src="imagen_abajo.jpg"
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td width="33%">
<img src="imagen_izq.jpg" name="imagen1" onMouseover="document.images['imagen_abajo2'].src=imagen1.src" onMouseout="document.images['imagen_abajo2'].src=imagen_abajo.src"></td>
<td width="33%">
<img src="imagen_ctr.jpg" name="imagen2" onMouseover="document.images['imagen_abajo2'].src=imagen2.src" onMouseout="document.images['imagen_abajo2'].src=imagen_abajo.src"></td>
<td width="34%">
<img src="imagen_der.jpg" name="imagen3" onMouseover="document.images['imagen_abajo2'].src=imagen3.src" onMouseout="document.images['imagen_abajo2'].src=imagen_abajo.src"></td>
</tr>
<tr>
<td width="33%">
<p align="right">Ésta Cambiará -> </td>
<td width="33%"><img src="imagen_abajo.jpg" name="imagen_abajo2"></td>
<td width="34%"><- Ésta Cambiará</td>
</tr>
</table>
</body>
</html>

Espero que con eso te aclares. En caso contrario, postea acá tus dudas.

Saludos!

Skineriano · #4 (**permalink**) 27/11/2002, 04:14

Muchas gracias por vuestras respuestas!.
La verdad es que como no tengo muchos conocimientos de esto tendré que probar a ver si me sale... lo del código no es mi fuerte.

KarlanKas · #5 (**permalink**) 27/11/2002, 05:10

Skineriano!

Las respuestas que te han puesto son muy válidas, pero te pongo esta otra para ver si te aclaras un poco más!

Donde debes poner el nombre de las imagenes es en donde está en rojo.

Código:

<html>
<head>

<script>
nuevaImagen=new Array;
nuevaImagen[0]=new Image;
nuevaImagen[1]=new Image;
nuevaImagen[2]=new Image;
nuevaImagen[3]=new Image;

 
nuevaImagen[0].src="imagenprimera.jpg"; //Esta es la imagen que aparece antes de pasar por encima de las opciones 
nuevaImagen[1].src="opcion1.jpg";  //La imagen que aparece al pasar por encima de la primera opción 
nuevaImagen[2].src="opcion2.jpg";";  //La imagen que aparece al pasar por encima de la segunda opción 
nuevaImagen[3].src="opcion3.jpg";  //La imagen que aparece al pasar por encima de la tercera opción

function cambio(x){
document.getElementById("imagenCambiante").src=nuevaImagen[x].src;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="enlace1.jpg" onmouseover="cambio(1);" onmouseout="cambio(0)";>
</td>
<td>
<img src="enlace2.jpg" onmouseover="cambio(2);" onmouseout="cambio(0)";>
</td>
<td>
<img src="enlace3.jpg" onmouseover="cambio(3);" onmouseout="cambio(0)";>
</td>
</tr>
<tr>
<td colspan="3"><img id="imagenCambiante"  src="imagenprimera.jpg">
</td>
</tr>
</table>
</body>
</html>

Espero que te sirva!!