Foros del Web » Creando para Internet » CSS »

tooltip con imagenes

Estas en el tema de tooltip con imagenes en el foro de CSS en Foros del Web. buenas gente quiero hacer este tooltip con imágenes i no me sale me muestra las dos imágenes dentro del div como lo hago ? este ...
  #1 (permalink)  
Antiguo 25/01/2011, 09:36
 
Fecha de Ingreso: noviembre-2010
Mensajes: 11
Antigüedad: 7 años
Puntos: 0
tooltip con imagenes

buenas gente quiero hacer este tooltip con imágenes i no me sale me muestra las dos imágenes dentro del div como lo hago ?

este e sel código :
Código HTML:
<div id="incognita"><a class="globos"><img src="../imagenes/interrogación.png" width="82" height="91" /><span><img src="../imagenes/tooltip.png"/></span></a></div> 
saludos y gracias !

Y si no cual seria la forma de hacer una imagen de sustitución con dimensiones distintas, ya que la segunda al sr mas grande cuando paso el puntero no me la muestra del tamaño real !
  #2 (permalink)  
Antiguo 25/01/2011, 09:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: tooltip con imagenes

Hola:

No sé exactamente lo que quieres hacer, pero léete este artículo: Tooltips usando CSS.

Saludos.

  #3 (permalink)  
Antiguo 25/01/2011, 10:00
 
Fecha de Ingreso: noviembre-2010
Mensajes: 11
Antigüedad: 7 años
Puntos: 0
Respuesta: tooltip con imagenes

Lo que quiero es crear un tooltip con una imagen, osea que al pasar el ratón sobre una imagen esta desaparezca y aparezca la otra !
  #4 (permalink)  
Antiguo 25/01/2011, 11:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: tooltip con imagenes

Hola:

Entonces lo que debes usar es un sprite css, mira este tema.

Saludos.

  #5 (permalink)  
Antiguo 25/01/2011, 12:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: tooltip con imagenes

Código CSS:
Ver original
  1. .incognita a span {display: none;}
  2. .incognita a:hover img {display: none;}
  3. .incognita a:hover span img {display: block;}
Añadase el resto de propiedades necesarias para su correcto posicionamiento.

Pero quizás fuese mejor no utilizar un span como contenedor de la segunda imagen. Quizás mejor aplicar una clase a cada una:

Código HTML:
Ver original
  1. <div id="incognita">
  2. <a class="globos" href="#">
  3. <img class="icono" src="..." width="82" height="91" alt="alt" />
  4. <img class="big" src="..." alt="alt" />
  5. </a>
  6. </div>
Y si van a ser más de un enlace con sus imágenes, crear una lista (ul/li/a)

P.D.: acostúmbrese a publicar también el css implicado.

Etiquetas: imagenes, tooltip
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 14:22.