vuelcos de imagen son herramientas útiles para ayudar a los usuarios finales un seguimiento de su ratón a través de su página Web. Un diseñador de sitios web a menudo empacar una gran cantidad de información detallada en una página y el usuario final tendrá una cola visual que su ratón se ha rodado sobre something.There dos formas básicas para crear un rollover . Usted puede utilizar el lenguaje de scripting del lado del cliente llamado JavaScript para realizar la tarea , o puede usar Cascading Style Sheets ( CSS ) para realizar la tarea . Este artículo se refiere al método de Hojas de estilo en cascada . Crear el texto Rollover

Crear un documento XHTML genérico en su editor de texto como se ve en la imagen .

* Incluir el DOCTYPE de Transición y las etiquetas de codificación. * Incluye las etiquetas de título entre las etiquetas de la cabeza * Incluye las etiquetas de estilo entre las etiquetas de la cabeza

entre las etiquetas del cuerpo , escriba las siguientes palabras : . . .

se trata de un texto de rollover

Incluya esta frase con el lapso inicial y etiquetas de cierre , como se muestra . Dentro de la etiqueta span inicio , escriba: .
Clase

= " rollover "

Cargue el documento en el servidor Web
Creación de las reglas de hojas de estilo

Escriba el siguiente entre las etiquetas de estilo en la parte superior del documento :

span.rollover {background - color: blanco; } útil: hover.rollover {background - color: amarillo; color: marrón ;}

en primer lugar, crear la instrucción de rollover lapso de la hoja de estilos . Tipo de "span ", luego de un período , y luego " rollover ", donde vuelco coincide con el atributo de clase que se le dio a la etiqueta span . Esto indica que el fondo entre las etiquetas span es de color blanco , que se parece a un color de fondo blanco para el usuario final .

A continuación , cree el período , más de dos puntos, además de un período, más de vuelco , que es la clase de la etiqueta span . La instrucción de vuelo estacionario significa " Al colocar el puntero del ratón sobre el texto dentro de la etiqueta span , siga estas instrucciones. " Cuando los lugares de los usuarios finales del ratón sobre el texto , el fondo se vuelve amarillo y el texto se vuelve marrón.
Creación de un botón Rollover

Hay una forma relativamente fácil crear un botón de aspecto agradable del texto en su página web. Sólo tiene que añadir los siguientes atributos a la instrucción span.rollover :

background-color : azul marino , frontera : inicio blanco 5px ; font- family: Georgia; font- size: 14pt ; color: blanco;
< p> en primer lugar, cambiar el color de fondo de blanco a azul marino . A continuación, agregue la instrucción frontera , que tiene tres partes: la frontera de ancho , el border-color y los atributos de estilo frontera. Hemos optado por una , blanco , frontera inicio de 5 píxeles , lo que significa que hay un blanco, caja rectangular frontera con el contenido de la etiqueta span que es 5 píxeles de grosor .

Cambiar la familia de fuentes a Georgia a los 14 pt . Por último , cambiar el color del texto a blanco , por lo que se presenta contra el fondo azul marino . Cargue el documento en el servidor Web y probarlo.
Antes del Rollover

Esta es una captura de la página web antes de colocar el puntero del ratón sobre el texto . El texto es de color blanco , y el fondo es de color azul marino .
Después del Rollover

Esta es una captura de la página Web , mientras que el puntero del ratón está sobre el botón. El fondo es amarillo, y el texto es de color granate .