En informática , un mouse over , mouse hover o hover box es un elemento de control gráfico que se activa cuando el usuario mueve o coloca el puntero sobre un área de activación, generalmente con un mouse , pero también es posible con un lápiz digital . Los elementos de control del mouseover son comunes en los navegadores web . Por ejemplo, al pasar el cursor sobre un hipervínculo, el elemento de control del mouse sobre el mouse muestra una URL en la barra de estado . Los diseñadores de sitios pueden definir sus propios eventos de mouseover utilizando JavaScript [1] oHojas de estilo en cascada . [2]
Los eventos de mouseover se utilizan con frecuencia en el diseño web y la programación de la interfaz gráfica de usuario .
También se conoce como rollover, que se refiere a un botón creado por un desarrollador web o diseñador web, que se encuentra dentro de una página web , y se utiliza para proporcionar interactividad entre el usuario y la página en sí. El término rollover en este sentido se origina en el proceso visual de "pasar el cursor del mouse sobre el botón", lo que hace que el botón reaccione (generalmente visualmente, reemplazando la imagen de origen del botón con otra imagen) y, a veces, resulta en un cambio en la web. página en sí. La parte del término "rodar" probablemente se refiere a ratones más antiguos que tenían un ensamblaje mecánico que consistía en una bola de goma dura alojada en la base del mouse (que rueda) al contrario que el mouse óptico moderno, que no tiene partes rodantes.
Los traspasos se pueden realizar mediante imágenes, texto o botones. El usuario solo requiere dos imágenes / botones (con la posible adición de texto "alt" a estas imágenes) para realizar esta acción interactiva. Las imágenes de sustitución se pueden realizar mediante un programa con una herramienta incorporada o mediante la codificación de secuencias de comandos. El usuario deberá elegir una primera imagen y seleccionar una imagen secundaria alternativa. La acción del mouse deberá configurarse como "hacer clic en" o "pasar el mouse" para que se active el rollover. Cuando el mouse se mueve sobre la imagen, la imagen alternativa / imagen secundaria aparecerá pero no permanecerá; cuando el usuario "mueva el mouse hacia afuera" moviendo el mouse lejos de la imagen, la imagen de origen original reaparecerá. [ cita requerida ]
Descripción emergente
Un uso especial del evento mouseover es una información sobre herramientas que muestra una breve descripción del objeto debajo del puntero. La información sobre herramientas aparece solo después de que el mouse o el lápiz óptico se mantenga sobre el objeto durante un cierto período de tiempo.
En las imágenes, estas se pueden producir utilizando el atributo HTML title
. [3]
Ejemplos de
No se ajusta a los estándares web. -> < img id = "myImage" src = "/images/myImage.jpg" onMouseOver = "alert ('su mensaje');" >
// Código JavaScript sin ningún marco < ref > var myImg = document . getElementById ( 'miImagen' ); < / ref> function myMessage () { alert ( 'su mensaje' ); }if ( myImg . addEventListener ) { // addEventListener es el método estándar para agregar eventos a los objetos. myImg . addEventListener ( 'mouseover' , myMessage , false ); }else if ( myImg . attachEvent ) { // Para Internet Explorer myImg . attachEvent ( 'onmouseover' , myMessage ); }else { // Para otros navegadores myImg . onmouseover = myMessage ; }
// ejemplo de jQuery. Se degrada bien si JavaScript está desactivado en el navegador del cliente. $ ( "img" ). mouseover ( function () { alert ( 'su mensaje' ); });
Referencias
- ^ JavaScript OnMouseOver
- ^ Menú CSS avanzado | por Web Designer Wall
- ^ "Un vocabulario y API asociadas para HTML y XHTML" . Consultado el 16 de febrero de 2015 .
enlaces externos
- Menú CSS oculto Un menú de varios niveles con el mouse sobre CSS puro (es decir, sin JavaScript)
- DontClick.it Demostración de la navegación usando solo el mouseover (requiere Flash Player)