imagenes de intercambio

Joanr · #1 (**permalink**) 23/06/2007, 01:26

Buenas,

Me interesa un javascript que me permita visualizar una imagen diferente cada vez que haga clic en otras imagenes más pequeñas situadas en otro sitio de la página.

Alguien conoce alguno o cómo hacerlo?

JavierB · #2 (**permalink**) 23/06/2007, 02:48

Hola Joanr. Bienvenido al foro.

Un ejemplo:

Código:

<img src="imagen1.jpg" onclick="document.getElementById('im').src = 'imagen2.jpg'" />
<img src="" id="im" />

Saludos,

joanrcp · #3 (**permalink**) 23/06/2007, 04:54

JavierB, mil mil mil gracias. He estado buscando bastante cómo resolver el tema y me das una respuesta efectiva 100% i hiperfàcil.

Muchas gracias :D

joanrcp · #4 (**permalink**) 23/06/2007, 06:00

Ui,

Veo que este código va perfecto para el Internet Explorer, però no en cambio para Firefox. Sabes cómo solucionarlo para qeu corra también en otros navegadores?

derkenuke · #5 (**permalink**) 23/06/2007, 06:06

La verdad es que para FF no hay ningún problema según he probado:

Código PHP:

  <img src="http://www.forosdelweb.com/images/buttons/reply.gif" onclick="document.getElementById('im').src = 'http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif'" />
<img src="" id="im" width="207" height="108" />

Y carga sin problemas en un momentito.

Un saludo.

joanrcp · #6 (**permalink**) 24/06/2007, 01:38

Pues yo no consigo que el FF lo acepte. Creo que mi problema debe estar en el código html o css.

El html:

<div id="foto_central">
<img src="imatges/banyoles-aeria.png" title="prova" alt="prova" id="im">
</div>

<div id="fotos_2">
<ul>
<li><img src="http://news.xinhuanet.com/english/2006-07/24/xinsrc_522070324082600022685.jpg" alt="imagen1" title="imagen1" onclick="document.getElementById('im').src='http://www.hospes.es/Images/Fullsize/palma_main_4.jpg'"></li>
<li><img src="http://news.xinhuanet.com/english/2006-07/24/xinsrc_522070324082600022685.jpg" alt="imagen2" title="imagen2" onclick="document.getElementById('im').src='http://www.hospes.es/Images/Fullsize/palma_main_3.jpg'"></li>
</ul>
</div>

El CSS:

div#foto_central {
float: left;
width: 18.4em;
height: 18.33em;
_height: 0;
}

div#fotos2 {_margin-top: 3.2em;}

div#fotos2 ul {
list-style: none;
margin: 0;
padding: 0;
}

div#fotos2 li {
display: inline;
padding-right: .5em;
}

Le veis algún problema por aquí?

caricatos · #7 (**permalink**) 24/06/2007, 01:50

Hola:

Las imágenes existen y el script está bien... lo he probado en explorer y muestra bien las imágenes...

Si tienes firefox u opera, mira la consola de error...
Sobre los estilos, los que se definen por el id no es necesario ponerle el tag por delante...

div#foto_central => #foto_central

Saludos

joanrcp · #8 (**permalink**) 24/06/2007, 02:09

Pues lo he probado en dos PC distintos y en uno sí funciona con FF y en el otro no. Acaso hay que activar algo en el navegador para que pueda leer el javascript?

caricatos · #9 (**permalink**) 24/06/2007, 02:22

Cita:

Iniciado por joanrcp

Pues lo he probado en dos PC distintos y en uno sí funciona con FF y en el otro no. Acaso hay que activar algo en el navegador para que pueda leer el javascript?

Pues sí. Prácticamente todos los navegadores en su configuración tiene la opción de deshabilitar javascript... mira las preferencias.

Saludos

joanrcp · #10 (**permalink**) 24/06/2007, 03:26

Con este código es posible que el puntero del ratón se convierta en una mano cuando se situa encima de las imágenes pequeñas? Cuál seria el código?

caricatos · #11 (**permalink**) 24/06/2007, 03:42

Hola:

Ese tipo de puntero se pone con estilos:
cursor: pointer

Saludos

JavierB · #12 (**permalink**) 24/06/2007, 03:42

Hola joanrcp

Pon esto entre <head> y </head>

Código:

<style type="text/css">
  .peque {cursor:pointer}
<style>

Y las imágenes:

Código:

<img src="imagen.jpg" class="peque" />

Edito: "me se" ha adelantado caricatos (¡Hola!

) por 3 segundos

Saludos,