Foros del Web » Creando para Internet » HTML »

etiqueta title en una imagen

Estas en el tema de etiqueta title en una imagen en el foro de HTML en Foros del Web. Buenos dias Tengo una imagen. Lo que quiero es que cuando me pare sobre ella me muestre un mensaje esto lo hago un la etiqueta ...
  #1 (permalink)  
Antiguo 16/02/2011, 13:27
 
Fecha de Ingreso: abril-2010
Ubicación: Colombia
Mensajes: 229
Antigüedad: 7 años, 8 meses
Puntos: 2
etiqueta title en una imagen

Buenos dias

Tengo una imagen. Lo que quiero es que cuando me pare sobre ella me muestre un mensaje esto lo hago un la etiqueta title hasta hay todo va bien pero necesito cargar una pequeña lista osea poner saltos de linea dentro de esta etiqueta. No se si se pueda hacer o halla otra manera. Espero haberme hecho entender.

<img src="images/01.png" width="16" height="16" title="a b c d">

Gracias
  #2 (permalink)  
Antiguo 16/02/2011, 14:01
Avatar de yense  
Fecha de Ingreso: febrero-2008
Ubicación: Perú Lima
Mensajes: 340
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: etiqueta title en una imagen

Bueno si quieres hacer eso mejor busca tooltpi en javascript o mejor con jquery eso te debe de ayudar

ademas solo debes de colocar un title en cada tag
__________________
©® -> Conocer algo mas es dar un paso mas <- ®©
  #3 (permalink)  
Antiguo 16/02/2011, 14:45
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: etiqueta title en una imagen

Un ejemplo con CSS y HTML:

Código HTML:
Ver original
  1. <div class="hover">
  2.     <img src="img.gif"/>
  3.     <p>Título<br/>linea 2</p>
  4. </div>
Código CSS:
Ver original
  1. .hover {
  2.     display: inline-block;
  3.     position: relative;
  4.     text-align: center;
  5. }
  6. .hover p {
  7.     background: none repeat scroll 0 0 #334455;
  8.     bottom: 0;
  9.     color: #FFFFFF;
  10.     margin: 0;
  11.     position: absolute;
  12.     text-align: center;
  13.     visibility: hidden;
  14.     width: 100&#37;; /* aquí debería decir 100% */
  15. }
  16. .hover:hover p {
  17.     visibility: visible;
  18. }

El párrafo permanece oculto y al pasar por encima de la imagen se vuelve visible.
  #4 (permalink)  
Antiguo 16/02/2011, 14:55
 
Fecha de Ingreso: abril-2010
Ubicación: Colombia
Mensajes: 229
Antigüedad: 7 años, 8 meses
Puntos: 2
Respuesta: etiqueta title en una imagen

MUchas gracias por la respuesta voy a probarlo y te comento...
  #5 (permalink)  
Antiguo 16/02/2011, 15:55
 
Fecha de Ingreso: abril-2010
Ubicación: Colombia
Mensajes: 229
Antigüedad: 7 años, 8 meses
Puntos: 2
Respuesta: etiqueta title en una imagen

Hice la prueba pero no pasa nada(NO FUNCIONA). No se mucho de css pero en los estilos no deberia ir el nombre de la imagen o algo.

Gracias
  #6 (permalink)  
Antiguo 16/02/2011, 17:22
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: etiqueta title en una imagen

Según te lo he puesto, la imagen está colocada en una etiqueta HTML <img/>.
También podría ir en el fondo del div con una propiedad background, pero en ese caso debes añadir el alto y ancho de la imagen a las propiedades width y height del div.
Como puede que la clase deba usarse con más de una imagen de diferentes medidas, parece mejor la primera solución.
Desde luego que el código debe colocarse dentro de una página y que en el atributo src="img.gif" de la etiqueta img debes colocar la dirección de una imagen de tu ordenador, de otro modo no verás nada.
La intención es que el texto que colocas en la etiqueta <p> se muestre en la parte inferior de la imagen cuando pasas por encima de la foto.

Etiquetas: title, etiquetas
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 11:20.