Foros del Web » Creando para Internet » Diseño web »

Consulta simple de imagen

Estas en el tema de Consulta simple de imagen en el foro de Diseño web en Foros del Web. Buenas Noches! Me precento soy chris. y mi consulta consiste asi. Quiero saber que codigo javascript tengo q usar. para lograr esto; Tengo tres textos. ...
  #1 (permalink)  
Antiguo 09/09/2009, 11:02
 
Fecha de Ingreso: febrero-2009
Mensajes: 16
Antigüedad: 8 años, 10 meses
Puntos: 0
Consulta simple de imagen

Buenas Noches! Me precento soy chris. y mi consulta consiste asi.

Quiero saber que codigo javascript tengo q usar. para lograr esto;
Tengo tres textos. TEXTO1 TEXTO2 TEXTO3- y debajo una imagen. IMAGEN1 , Lo que quiero es que al pasar el mouse sobre Texto1 la imagen cambie a Imagen2. y al pasaro x Texto2 la imagen cambie a IMAGEN3 asi sucesibamente. Pero al salir del texto con el cursor. vuelva a imagen1. que la imagen1 sea la predeterminada y este siempre. mientras el mouse no este sobre los textos. Espero que me ayuden y desde ya muchas gracias

Y perdonen si el tema no iba aca.
  #2 (permalink)  
Antiguo 09/09/2009, 11:36
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Consulta simple de imagen

Esto se hace con javascript, y hay ejemplos en el foro de javascript.

Basicamente, necesitas identificar las fotos con un id. Y tenerlas todas cargadas en el mismo div, quizas con un z-index y position absolute para que no se desplieguen una abajo de la otra.

El codigo para cambiar de foto seria esto :

<img src="foto3.jpg" alt="" id="foto3" class="fotos" style="visibility:hidden" />

document.getElementById('foto3').style.visibility= "visible"

Si pusieras tambien un class name para las fotos, podrias esconder las restantes de un solo saque, al mostrar una nueva:

document.getElementsByClassName('fotos').style.vis ibility="hidden"

Para el disparador, esto funcionaria:
onclick="document.getElementsByClassName('fotos'). style.visibility="hidden"; document.getElementById('foto3').style.visibility= "visible""
  #3 (permalink)  
Antiguo 09/09/2009, 13:22
 
Fecha de Ingreso: febrero-2009
Mensajes: 16
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Consulta simple de imagen

Mayid gracias por contestar. pero me podrias ayudar un poco mas, Es que no se muy bien como ordenar todo lo que tu me dijistes. y que me funcione. Ya que no se mucho sobre esto. Si me ayudarias con un ejemplo te agradeceria muchisimo.
  #4 (permalink)  
Antiguo 09/09/2009, 13:58
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Consulta simple de imagen

Necesito el codigo original para modelarlo. Dame los textos que disparan la aparicion / desaparicion. Mismo el div, y las imagenes, asi construyo el ejemplo. (me refiero al html que usas).
  #5 (permalink)  
Antiguo 09/09/2009, 14:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Consulta simple de imagen

Que tal algo asi?

<div>
<img class="fotos id="foto1" src="foto1" style="visibility: visible" alt="" />
<img class="fotos id="foto2" src="foto2" style="visibility: hidden" alt="" />
<img class="fotos id="foto3" src="foto3" style="visibility: hidden" alt="" />
</div>

<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto1').style.visibility= "visible"">texto 1</p>
<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto2').style.visibility= "visible"">texto 2</p>
<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto3').style.visibility= "visible"">texto 3</p>
  #6 (permalink)  
Antiguo 09/09/2009, 15:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Consulta simple de imagen

Hola Copado
Si sigues interesado en realizarlo sin js, sólo con css, este ejemplo de Mikmoro puede serte útil (pienso)
http://www.araudi.net/ejemplos/cambio_fondo_frente.html
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 10/09/2009, 18:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 16
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Consulta simple de imagen

Gracias chicos fueron de mucha ayuda!
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 18:10.