Foros del Web » Programando para Internet » Javascript »

imagenes de intercambio

Estas en el tema de imagenes de intercambio en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/06/2007, 01:26
 
Fecha de Ingreso: junio-2007
Mensajes: 1
Antigüedad: 17 años, 8 meses
Puntos: 0
imagenes de intercambio

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?
  #2 (permalink)  
Antiguo 23/06/2007, 02:48
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 23 años
Puntos: 772
Re: imagenes de intercambio

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,
  #3 (permalink)  
Antiguo 23/06/2007, 04:54
 
Fecha de Ingreso: abril-2004
Mensajes: 50
Antigüedad: 20 años, 10 meses
Puntos: 0
Re: imagenes de intercambio

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
  #4 (permalink)  
Antiguo 23/06/2007, 06:00
 
Fecha de Ingreso: abril-2004
Mensajes: 50
Antigüedad: 20 años, 10 meses
Puntos: 0
Re: imagenes de intercambio

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?
  #5 (permalink)  
Antiguo 23/06/2007, 06:06
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 4 meses
Puntos: 45
Re: imagenes de intercambio

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #6 (permalink)  
Antiguo 24/06/2007, 01:38
 
Fecha de Ingreso: abril-2004
Mensajes: 50
Antigüedad: 20 años, 10 meses
Puntos: 0
Re: imagenes de intercambio

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í?
  #7 (permalink)  
Antiguo 24/06/2007, 01:50
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 11 meses
Puntos: 1284
Re: imagenes de intercambio

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 24/06/2007, 02:09
 
Fecha de Ingreso: abril-2004
Mensajes: 50
Antigüedad: 20 años, 10 meses
Puntos: 0
Re: imagenes de intercambio

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?
  #9 (permalink)  
Antiguo 24/06/2007, 02:22
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 11 meses
Puntos: 1284
Re: imagenes de intercambio

Cita:
Iniciado por joanrcp Ver Mensaje
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 24/06/2007, 03:26
 
Fecha de Ingreso: abril-2004
Mensajes: 50
Antigüedad: 20 años, 10 meses
Puntos: 0
Re: imagenes de intercambio

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?
  #11 (permalink)  
Antiguo 24/06/2007, 03:42
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 11 meses
Puntos: 1284
Re: imagenes de intercambio

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 24/06/2007, 03:42
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 23 años
Puntos: 772
Re: imagenes de intercambio

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,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:29.