A través de una combinación de marcado HTML, declaraciones de hojas de estilo en cascada y el código JavaScript, las páginas web pueden aplicar efectos interactivos, alterando la apariencia de los elementos que el usuario mueve el ratón alrededor y se cierne sobre elementos específicos. Los desarrolladores pueden añadir efectos interactivos para cualquier elemento HTML utilizando los atributos de eventos, o para anclar elementos usando selectores CSS. Los atributos pueden indicar al navegador web para detectar el usuario se mueve el ratón dentro o fuera de cualquier elemento en particular, la alteración de la apariencia elemento cuando esto sucede.
Los elementos HTML
Las páginas web pueden incluir efectos de activación en cualquier elemento HTML. Cada elemento HTML está compuesta de etiquetas de apertura y de cierre, parte del contenido entre ellos y los atributos opcionalmente. El siguiente ejemplo de código HTML muestra un elemento típico:
<Div id = "IntelEM"> Mueve el ratón sobre este texto </ div>
Este elemento tiene algún contenido de texto simple y un atributo ID. El atributo ID solamente debe aparecer una vez en una sola página, ya que este atributo es para la identificación de elemento único. La función de la libración JavaScript puede utilizar el atributo ID para alterar la apariencia del elemento. efectos de activación también se puede aplicar para anclar elementos utilizando código CSS. El siguiente marcado muestra un ancla HTML:
<a href="page.html"> A Page </a>
atributos
elementos HTML pueden incluir varios atributos de los eventos. Dado que el efecto de la libración se produce cuando los usuarios mover el ratón sobre un elemento, elementos HTML deben detectar eventos de ratón. Los eventos "y" onmouseover "onMouseOut" detectan el usuario rodar el ratón dentro y fuera de un elemento. El siguiente marcado muestra ampliada demuestra la adición de estos dos atributos de evento al elemento:
<Div id = "IntelEM" onmouseover = "onElem (this.id)" onmouseout = "offElem (this.id)"> Mueve el ratón sobre este texto </ div>
Este código indica al navegador Web para detectar al usuario rodar el ratón dentro o fuera del elemento, llamando a las funciones JavaScript especificado cuando esto ocurre. Cada llamada a la función pasa el ID de elemento como un parámetro, por lo que el código JavaScript será capaz de identificar el elemento dentro de la página.
JavaScript
páginas web implementan efectos interactivos utilizando código JavaScript. Este código puede ser incluido dentro de los archivos guardados con JavaScript ".js", vinculados a la extensión de la sección de cabeza página HTML de la siguiente manera:
<Script type = "text / javascript" src = "pagefunctions.js"> </ script>
Esto proporciona acceso a las funciones enumeradas en un archivo llamado "pagefunctions.js", que se guarda en el mismo directorio que la página. Como alternativa, los desarrolladores pueden incluir código JavaScript directamente en la sección de cabecera de la página de la siguiente manera:
<Script type = "text / javascript">
// funciones aquí
</ Script>
Esta sección puede contener las funciones JavaScript para aplicar el efecto estacionario.
funciones
funciones de JavaScript para aplicar efectos de activación primero identifican los elementos que se están interactuado. La función siguiente se describe representar los dos atributos de los eventos llamados cuando el ratón se mueve dentro y fuera de un elemento:
función onElem (elemID) {
// Implementación de la función aquí
}
función offElem (elemID) {
// Implementación de la función aquí
}
Dentro de estos cuerpos de las funciones, los desarrolladores pueden poner en práctica el efecto de la libración. El siguiente código obtiene una referencia al elemento de llamar al método:
var theElem = document.getElementById (elemID);
La función puede entonces aplicar propiedades de estilo para el elemento, como sigue:
theElem.style.color = "# FF0000";
La función se llama cuando el usuario pasa el ratón fuera del elemento podría devolverle su aspecto visual inicial. Cada vez que estas funciones se ejecutan, se puede utilizar el parámetro id indicado para localizar el elemento correcto y alterar su apariencia como sea necesario.
Selección CSS
Las declaraciones CSS para un sitio puede estilo de los elementos de anclaje. CSS se puede especificar la configuración de aspecto particulares para cuando el usuario pasa el ratón sobre un ancla. La siguiente declaración CSS demuestra el establecimiento de la aparición de los anclajes de página en vuelo estacionario:
a: hover {color: # 333333;}
En esta sección se puede incluir otras declaraciones CSS para dictar el estilo de los contenidos de anclaje. El código CSS también puede especificar opcionalmente la configuración para el elemento de anclaje en su estado normal como un enlace HTML y para los enlaces que el usuario ya ha visitado.