ir arriba

04 abril 2007

tooltip o mensaje adicional

Ya hace algunos posts que explique como poner un efecto Title opacity o Tooltip en el blog, os voy a poner otro sin transparencia (opacity) es muy fácil y un resultado increíble...



Código CSS : pegar debajo del <head>


<style>
a.info {
position:relative;
color:#000;
text-decoration:none;
}
a.info span {
display: none;
}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:270px;
border:1px solid #FF0000;
background-color:#FFDAB9;
color:#000000;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}
</style>


Código HTML: pegar en crear entradas del blog

<a href="aquí la url del enlace" class="info"> aquí texto enlace <span><img src=" aquí una imagen gif, png o jpg">Aquí el texto dentro de la ventana</span></a>


Para cambiar los parámetros ( css ):

width:270px; ( ancho de la ventana )
border:1px solid #FF0000; ( grossor del borde + color del borde )
background-color:#FFDAB9; ( color de fondo )
color:#000000; ( color del texto )
text-align: left; (aliniar texto izquierda, center = derecho, right = derecho)
font-family: Arial, Helvetica, sans-serif; ( fuente del texto )
font-size: 12px; ( tamaño de la fuente )
padding: 5px; (establece el control del texto al borde )

Visto en: w3.org

Esto es todo ...feliz día para todos

Escrito por: ☺ Josscat

Etiquetado como:

1 comentario:

Gem@ dijo...

Te he añadido a mi despeglable de blogs que ayudan creo que tienes un blog fantástico y mucho para mostrar ;)

7 de abril de 2007, 20:01  

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)
© josscat.blogspot.com 2007