Mostrar Fotos en otra parte de la pantalla

betodaniel61 · #1 (**permalink**) 20/01/2010, 07:51

Buenos Días
Necesitaría colocar en una pagina, a la izquierda muchas fotos chiquitas y que al pasar con el mouse por las mismas me las muestre grandes en la parte derecha de la pantalla.
Lo vi en muchas paginas pero no logro hacerlo
Muchas Gracias a alguien que peuda ayudarme

David · #2 (**permalink**) 20/01/2010, 08:18

Lo que tienes que hacer es usar el evento onmouseover de las imágenes pequeñas para cambiar el src de la imagen de mayor tamaño:

Código Javascript:

Ver originaldocument.getElementById("imagen_mayor").src = "direccion_imagen_grande.jpg";

betodaniel61 · #3 (**permalink**) 20/01/2010, 10:44

Amigo, hice lo siguiente pero no funciona, no se que estoy lo que estoy haciendo mal, no entiendo lo de la "imagen_mayor", tengo que definir donde colocar la imagen mas grande??
Te agradeceria si me podrias ayudar.

<body>
<img src="01.jpg" width="120" height="90" onMouseOver="javascript:document.getElementById("i magen_mayor").src = "101,jpg";"/>
<img src="02.jpg" width="120" height="90" onMouseOver="javascript:document.getElementById("i magen_mayor").src = "102,jpg";"/>
<img src="03.jpg" width="120" height="90" onMouseOver="javascript:document.getElementById("i magen_mayor").src = "103,jpg";"/>
<img src="04.jpg" width="120" height="90" onMouseOver="javascript:document.getElementById("i magen_mayor").src = "104,jpg";"/>
<img src="xx.jpg" width="585" height="422" name="imagen_mayor"/>
</body>

JavierB · #4 (**permalink**) 20/01/2010, 10:47

Hola betodaniel61

No pongas name pon id

Código HTML:

Ver original<img src="xx.jpg" width="585" height="422" id="imagen_mayor"/>

onmouseover se escribe en minúsculas y no tienes que poner javascript:

Saludos,

betodaniel61 · #5 (**permalink**) 20/01/2010, 13:04

Amigo, nos estamos acercando pero no hace nada cuando paso el mouse por las imagenes, en la imagen le saque el src pero tampoco funciona.
Si se puede una ayuda mas muy agradecido

<body>
<img src="01.jpg" width="120" height="90" onmouseover=document.getElementById("imagen_mayor" ).src="101,jpg";"/>
<img src="02.jpg" width="120" height="90" onmouseover=document.getElementById("imagen_mayor" ).src="102,jpg";"/>
<img src="03.jpg" width="120" height="90" onmouseover=document.getElementById("imagen_mayor" ).src="103,jpg";"/>
<img src="04.jpg" width="120" height="90" onmouseover=document.getElementById("imagen_mayor" ).src="104,jpg";"/>
<img width="585" height="422" id="imagen_mayor"/>
</body>

LuisdaviD · #6 (**permalink**) 20/01/2010, 14:23

Prueba asi:

Código HTML:

<body>
<img src="01.jpg" width="120px" height="90px" onMouseOver="document.getElementById('imagen_mayor').src='01.jpg'"/>
<img src="02.jpg" width="120px" height="90px" onMouseOver="document.getElementById('imagen_mayor').src='02.jpg'"/>
<img src="03.jpg" width="120px" height="90px" onMouseOver="document.getElementById('imagen_mayor').src='03.jpg'"/>
<img src="04.jpg" width="120px" height="90px" onMouseOver="document.getElementById('imagen_mayor').src='04.jpg'"/>
<img src="01.jpg" width="585px" height="422px" id="imagen_mayor"/>
</body>

Saludos.

betodaniel61 · #7 (**permalink**) 20/01/2010, 14:43

Perfecto Amigo, funciona, Muchisimas Gracias por tu ayuda.