**No dudes en dejar comentarios o alguna sugerencia** El Blog de J.Guti.: Tooltip

Tooltip

lunes, 10 de diciembre de 2007

Consiste en aportar información visual extra a los textos, enlaces o palabras que quieras resaltar de una manera especial. Een ellos se pueden resaltar mediante textos o imagenes que aporten una información complementaria.
Para implantarlo buscaremos en nuestra plantilla el siguiente código:]]></b:skin> y añade justo antes el siguiente código:




[+/-]Código



    a.tooltip {

    position:relative;

    color:#000;

    text-decoration:none;

    }

    a.tooltip span {

    display: none;

    }

    a.tooltip:hover span {

    display:block;

    position:absolute;

    top:2em;

    left:2em;

    width:120px;

    border:double #000000;

    background-color:silver;

    color:#ffffff;

    text-align: center;

    font-family: Arial;

    font-size: 10px;

    padding: 5px;

    }


    Ahora cuando quieras añadir un tooltip con imagen a un enlace presenta esto así:


    <a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>





    y si quieres aplicarlo a una palabra sin que este sea exactamente un enlace aplica esto otro:
    <a class="tooltip">AQUI LA PALABRA O FRASE<span><img src="URL DE LA IMAGEN" /></span></a>








en esta parte del código se pueden configurar estas opciones:
top:2em;.......define aquí la posición. Cambia TOP por BOTTOM para situarlo por encima
left:2em;......Cambia LEFT por RIGHT para situarlo a derecha o izquierda
width:120px;.....Define la anchura
border:double #000000; .......Defina el borde y color
background-color:silver; .....Define color de fondo
color:#ffffff; ...............Color , alineación y tipo de fuente

Publicado por Guti en 19:22  

Pulsar para oir post hablado

0 comentarios:

Publicar un comentario

 
Comentarios