jump to navigation

Tooltip, texto al pasar sobre una imágen Noviembre 18, 2006

Publicado por lineadecodigo en : HTML , trackback

Muchas veces habréis pasado sobe una imagen y habréis visto que sale como un pequeño texto en amarillo con un texto, normalmente relacionado con la imagen. Pues bien, eso es lo que se conoce como tooltip.

Lo primero que vamos a hacer es poner una imágen en nuestra página web. Para ello utilizaremos la etiqueta <IMG>. Dentro de esta etiqueta tenemos el atributo SRC que nos indicará el nombre de la imagen que queremos mostrar.

Así nos quedará la siguiente línea de código:

<IMG src="foto.jpg"/>

Si queremos incluirle el tooltip deberemos de utilizar el atributo TITLE, al cual le daremos como valor el texto que queramos que salga en el tooltip. Veamos como queda la línea de código:

<IMG src="foto.jpg" TITLE="Foto de linea de codigo"/>

Lo bueno del atributo TITLE es que lo podemos utilizar en diferentes etiquetas HTML. Es decir, que no solo está limitado a la etiqueta IMG.

Y veamos el resultado, pasa sobre la imágen...

Foto de Línea de Código

Veámos el comportamiento de algunos navegadores:

Title en los navegadores

Visualizar el ejemplo | Descargar el código

Articulos Similares:

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 7649 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Comentarios»

1. ponsho - Julio 25, 2007

lo hago para DreamWeaver en un archivo Html y no me funciona… que estare haciendo mal.?
Gracias

2. GV - Marzo 19, 2008

Gracias por tener esta ayuda

3. Max Trebor - Agosto 27, 2008

Muy buen tip, me funcionó en un tag de .net:

La función Recupera_imagen = “”

4. camilo londoño - Diciembre 2, 2008

como hago para montarlo en dreamweare
porfavor respondamen

5. lineadecodigo - Diciembre 3, 2008

@Camilo, en DreamWeaver debería ser tan sencillo como incluir una imagen y ponerle el valor al campo alt o title. Si no, otra opción es ver el código HTML y rellenarlo directamente como explica el ejemplo.

6. rasputin - Diciembre 9, 2008

Alguna Idea para Java ?. Si alguno sabe, lo necesito para en una coordenada especifica. Gracias :P

7. jose - Mayo 15, 2009

Como puedo hacer multilínea el tip?

8. Felipe - Agosto 12, 2010

Muchas Gracias me salvaste en el momento oprtuno..;)


Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen