Header AD

Tooltips con imagen


Creo que ya he comentado en alguna ocasión, acerca de estos "títulos" que salen en algunas expresiones de nuestros blogs, cuando pasamos el ratón por encima.
Algunos blogroll las utilizan también para mostrar, junto al link, una imagen de la web que recomiendan (queda muy guapo, pero pesa mucho... sobre todo si hay muchos links en el blogroll). Ahora, vamos a hacer una
prueba: Internet Explorer
Como véis, al pasar el ratón sobre "prueba", sale un muñequín. Lo mismo podéis hacer especto de un link y su imagen o respecto de un texto cualquiera (insertando en la tooltip una palabra o una imagen, como queráis).
Las claves para que funcione tan estupendamente, las tiene Vagabundia, así:

1º.- Insertar el CSS de la tooltip en la edición de plantilla:
a.Ntooltip {
position: relative;
text-decoration: none !important;
color:#0080C0 !important;
font-weight:bold !important;
}

a.Ntooltip:hover {
z-index:999;
background-color:#000000;
}

a.Ntooltip span {
display: none;
}

a.Ntooltip:hover span {
display: block;
position: absolute;
top:2em; left:2em;
width:250px;
padding:5px;
background-color: #0080C0;
color: #FFFFFF;
}

("Ntooltip" es la denominación que jmiur le ha dado a la herramienta, para diferenciarla de otras posibles en la plantilla. Podéis cambiar todas las definiciones de colores, p.e.)

2º.- Insertad la siguiente tag donde queráis que aparezca vuestra tooltip:
<a class=Ntooltip href="">prueba:( o un link)<span> <img src="URLIMAGEN" alt="TÍTULO"> </span></a>

(He utilizado la función "alt": en otro caso, la tooltip no me funcionaba)

Como véis, es una especie de "lightbox". Solo que más ligera y con muchas posibilidades.


post-Firma

Tooltips con imagen Tooltips con imagen Reviewed by Pilar Lozano Santos on 18:09:00 Rating: 5

No hay comentarios

Post AD