ubiquitour.com

Cómo usar CSS para Rollover de imagen

Código de hoja de estilos en cascada permite añadir rollovers y otros trucos visuales a las páginas Web sin función de JavaScript. Para crear un rollover en CSS, utilice el: pseudo selector de libración. Se puede aplicar: suspender a cualquier etiqueta HTML y todos los navegadores, pero Internet Explorer 6 muestra el efecto de rollover correcto. El truco para rollovers de imagen es una etiqueta vacía de HTML y luego darle un fondo con la imagen inicial. El estado suspender cambia a un fondo diferente. Altura y anchura se agregan para asegurarse de que la etiqueta HTML se extiende para mostrar la imagen completa para ambos Estados.

Instrucciones

1 Abrir el archivo en un editor de HTML o crear uno nuevo. Lugar < div > y < / div > etiquetas en algún lugar entre el cuerpo de < > y < /body > tags, pero no coloque nada entre las etiquetas < div >. Dar la etiqueta < div > un atributo "ID". Las etiquetas < div > deberían parecerse a esto:

< div id = "algunos nombre" >< / div >

2 Abrir el archivo CSS para tu sitio web si uno existe o agregar < estilo > y < / estilo > Etiquetas entre el < head > y < / cabeza > tags del archivo HTML. Agregue el siguiente código CSS:

nombre de div {} fondo: URL(path/to/image.png) no center-repeat;

anchura: XXpx; altura: XXpx;

}

Cambiar la ruta de acceso entre paréntesis a la ruta de la imagen inicial. Esta es la imagen que se muestra antes de que el usuario mueve el cursor sobre el elemento < div >. Cambiar la anchura y la altura para que coincida con las dimensiones de la imagen en píxeles. Se parece a un ancho de 500 píxeles "width: 500px;" en CSS.

3 Añadir un estado de suspender a la etiqueta < div > de código CSS. El código se verá así:

div-nombre: hover {} fondo: URL(path/to/rollover.png) no center-repeat;

anchura: XXpx; altura: XXpx;

}

Cambiar la ruta de acceso entre paréntesis a la ruta a la imagen de sustitución. Esta es la imagen que aparecerá cuando un usuario desplaza el puntero de su ratón sobre el elemento < div >.

Consejos y advertencias

  • Cualquier etiqueta puede etiquetar el: hover pseudo clase, pero < a >, < útiles > y < li > "display: block;" en CSS si desea aplicar un rollover de la imagen.
  • Tenga en cuenta que en IE6, sólo se puede utilizar: hover en < a > etiquetas. Asegúrese de que los visitantes no tiene que ver el estado de rollover que realmente utilice el sitio o si lo hacen, una suplencia de JavaScript.