-
Cómo utilizar Onmouseover y onMouseOut
-
controladores de eventos de JavaScript causan código JavaScript que se ejecuta en respuesta a varios eventos que se producen en su página web. El "onmouseover" y eventos "onMouseOut" son provocados por la actividad del ratón del usuario: cuando el cursor pasa por encima de un objeto en la página con un gestor de eventos "onmouseover" que se le atribuye, el evento se activa. Cuando el cursor pasa de un objeto con un controlador de eventos "onmouseout" que se le atribuye, que evento se dispara. Coloque estos controladores de eventos a objetos en su página HTML con atributos o con comandos JavaScript.Instrucciones
1 Coloca las funciones de JavaScript entre las etiquetas "cabeza" de su documento HTML que contiene el código que le gustaría que se ejecutará cuando se producen los "onmouseover" y "eventos" onMouseOut. Utilice esta plantilla para comenzar:
<Script type = "text / javascript">
overhandler función () {
alert("MouseOver event for: " + this.id);}
outhandler función () {
alert("MouseOut event for: " + this.id);}
</ Script>
Estas funciones serán simplemente mostrar los cuadros de diálogo de alerta cuando se desencadenan los eventos respectivos. Colocar cualquier código JavaScript que te gusta en estas funciones. Observe el uso de la palabra "this"; "Este" en este contexto se referirá al objeto cuyo controlador de eventos fue provocada si adjunta al controlador de eventos con sentencias de JavaScript.
2 Añadir "onmouseover" y "onmouseout" controladores de eventos como atributos de las etiquetas HTML en el cuerpo del documento para la fijación a objetos. Aquí hay un ejemplo:
<Img id = "imagen1" onmouseover = "overhandler ();" onmouseout = "outhandler ();">
La palabra "this" no estará disponible en las funciones de controlador de eventos cuando se conecta de esta manera, por lo que si usted necesita utilizar "este" se refieren al método en el paso 3 o explícitamente pasar en la referencia de objeto como éste:
onmouseover = "overhandler (este);"
Si pasa la referencia de esta manera, recibirá la referencia al objeto en su función por la que se declara que en las etiquetas de "cabeza" de esta manera:
función overhandler (obj) {
A continuación, utilice "obj", donde se habría utilizado "este".
3 Agregue el código siguiente a la parte inferior de la sección de "cuerpo" del documento HTML para asignar controladores de eventos utilizando sentencias de JavaScript:
<Script type = "text / javascript">
. Document.getElementById ( "imagen1") onmouseover = overhandler;
document.getElementById ( "imagen1") onmouseout = outhandler.;
</ Script>
En este ejemplo se utiliza el atributo "id" para especificar qué objeto para unir los controladores de eventos para. Asociar controladores a muchos objetos del mismo tipo a la vez utilizando una rutina de este tipo:
<Script type = "text / javascript">
imgs = document.getElementsByTagName ( "img");
para (i en IMG) {
imgs[i].onmouseover = overhandler;imgs [i] = .onmouseout outhandler;
}
</ Script>
En ambos ejemplos, la palabra "this" se pone a disposición la función cuando se produce el evento. Asegúrese de colocar estas etiquetas "escritura" en la parte inferior de la sección de "cuerpo" para que se ejecute el código HTML después de que los elementos se han cargado.
Consejos y advertencias
- El "onmouseover" y "onmouseout" manejadores de eventos son compatibles con los siguientes objetos HTML: <a>, <dirección>, <area>, <b>, <BDO>, <big>, <blockquote>, <body>, botón <>, <caption>, <cite>, <code>, <dd>, <DFN>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1 > a <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot >, <th>, <culata en T>, <tr>, <tt>, <ul> y <var>.
