Tutoriales
Tutoriales ~ css ~ Rollover en Imagenes| Rollover en Imagenes | |
|
Fecha: 2008-12-07 Nivel: Facil Impresiones: 1 Autor: Shinji Categoria: css Descripcion: Con este tutorial podras crear imagenes con rollovers.. |
Bookmark:
  E-mail to a friend View printable version Permanlink |
A continuacion mostraremos como crear un rollover de imagenes con css, Este es un tutorial basico al que se le puede sacar mayor provecho.
para esto usaremos 2 imagenes
Link:
Hover:
Con un pequeño codigo de css crearemos el rollover
codigo:
<style>
a.rollover {
display: block;
width: 200px;
height: 50px;
text-decoration: none;
background: url('roll.png');
}
a.rollover:hover {
background: url('roll2.png');
}
</style>
<a href="#" class="rollover"> </a>
a.rollover Este sera la clase del estilo
width: 200px; En esta linea definimos el ancho de la imagen.
height: 50px; En esta linea definimos el alto de la imagen.
background: url('roll.png'); En esta definimos la url de la primera imagen.
a.rollover:hover Este clase es para el rollover.
background: url('roll2.png'); En esta definimos la segunda imagen.
ya que tienes esto solo basta con crear el link.
<a href="#" class="rollover"> </a>
Este fue mi resultado Click
Comentarios
No hay Comentarios.
Ads
Ultimos Tutoriales
Efecto de Luz en: photoshop el: 2008-12-08 por: Shinji
Triple Borde en: photoshop el: 2008-12-08 por: Shinji
Fondos con Pinceles en: photoshop el: 2008-12-08 por: Shinji
Glowing Skin en: photoshop el: 2008-12-08 por: Shinji
Negar Acceso a Archivos en: misc el: 2008-12-07 por: Shinji
Ultimos Layouts
