Jun
16
Comments

Rollover de Imagenes con CSS

rollover image

Algo muy fashion hoy en día es el realizar pequeños rollover’s (acción de pasar el mouse sobre algun objeto), en este introductorio, podremos analizar un pequeño tip de como realizar este efecto con imagenes.

El código consta de lo siguiente :

a#webchat {
     width: 300px;
     height: 50px;
     background-image: url(images/webchat.png);
     display: block;
     text-decoration: none;
 }
 a#webchat:hover {
     background-image: url(images/webchat_hover.png);
 }

Lo desglozaremos :

webchat = el identificador para colocarlo dentro de nuestro sitio web (ese lo escogí porque lo utilizé para un boton de un webchat, pero pueden especificar el que quieran.

Para incluirlo en nuestro diseño tan solo aplicaremos lo siguiente :

 

Con ello obtendremos un rollover de imagenes con CSS, el demo lo podrán ver en este mismo sitio con la imagen titulada : Webchat

Votar

Autor del Articulo | Power

Nombre del Articulo | Rollover de Imagenes con CSS

Categorias del articulo | diseño

Etiquetas Usadas en el articulo | | |
Enlace para TrackBacks | trackback

Articulo Anterior | mIRC scripting - spamfilter (para ircops)

Articulo Siguiente | Agregar el Editor WYSWYG en los comentarios

Quieres un avatar?

Los avatares de este Blog y de muchos otros, son gracias al sistema de Gravatar, para que aparezca tu imagen, registrate en gravatar.com