Un paso del ratón Tutorial HTML

En el diseño de un sitio web, puede cambiar el aspecto de un elemento, tal como un enlace o imagen, cuando el visitante se sitúa su puntero del ratón sobre el elemento. Hay varios métodos que alteran la base Hyper Text Markup Language que crea el elemento para proporcionar una experiencia diferente para el visitante. Puede agregar un estado personalizado a la barra de estado, la información sobre herramientas o modificar múltiples cualidades que caracterizan al elemento para captar la atención del visitante al pasar el ratón.

Instrucciones

Título Atributo

1 Abra la página Web que desea editar en su editor de texto o HTML.

2 Añadir un atributo de título para los elementos que desea mostrar la información sobre herramientas al pasar el ratón.

<Img src = "imagen.gif" title = "Descripción breve">

En este ejemplo "Descripción breve" Es un puesto en el texto que desea que aparezca al pasar el ratón.

3 Guarde el archivo, abra el menú "Archivo" y seleccionando "Guardar".

Barra de estado

4 Abra el documento HTML que desea editar en su editor.

5 Crear un enlace HTML, incluyendo el código JavaScript, para producir un mensaje de barra de estado por encima del ratón sobre:

<a href="URL" onMouseOver="window.status='Description'; volver true"> Enlace </a>

6 Cambio "URL" a la dirección del sitio web, "Descripción" hasta el mensaje que desea que aparezca en la barra de estado y "Enlace" al nombre del enlace.

7 Guarde el documento.

CSS

8 Abra su editor de texto y cargar el documento HTML que desea actualizar.

9 Escriba el código HTML para el elemento básico para el que desea añadir un efecto del ratón, con la adición de una clase CSS.

<a href="http://domain.com&quot; class="mouseover"> Enlace </a>

La dirección URL, nombre de la clase y el enlace de texto en el ejemplo anterior son sustitutos de sus valores reales.

10 Crear una sección CSS entre las etiquetas de apertura y cierre de la cabeza (</ head> <cabeza y) en el documento. La sección comenzará con <style type = "text / css"> y termina con </ style>

11 Escribir el CSS para modificar su elemento en vuelo estacionario.

.mouseover: hover {color: blue; Fondo: blanco; text-decoration: tachado; }

En este ejemplo ".mouseover" indica un elemento con nombre de la clase de "por encima del ratón." Si cambia el nombre de la clase, debe cambiar este nombre en el CSS. Las propiedades están rodeadas por paréntesis y separados por punto y coma. La propiedad, tales como "color", y el valor, tales como "azul", deben estar separados por dos puntos.

Cuando el visitante se cierne sobre el enlace, verá el texto azul con una línea a través de él sobre un fondo blanco.

12 Guarde el documento.