En informática , un mouseover , mouse hover o cuadro de desplazamiento es un elemento de control gráfico que se activa cuando el usuario mueve o pasa 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 al pasar el mouse activa el elemento de control para mostrar una URL en la barra de estado . Los diseñadores de sitios pueden definir sus propios eventos de mouseover usando JavaScript [1] u hojas de estilo en cascada . [2]
Los eventos de mouseover se utilizan con frecuencia en diseño web y programación de interfaces gráficas de usuario .
También se le conoce como rollover , que hace referencia a un botón creado por un desarrollador web o diseñador web, que se encuentra dentro de una página web , utilizado para brindar interactividad entre el usuario y la página misma. 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 misma. La parte del término "rodar" probablemente se refiere a ratones más antiguos que tenían un conjunto mecánico que consistía en una bola de goma dura alojada en la base del ratón (que rueda), a diferencia del ratón óptico moderno, que no tiene partes rodantes.
Los rollovers se pueden realizar mediante imágenes, texto o botones. El usuario solo necesita 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 rollover se pueden crear mediante un programa con una herramienta incorporada o mediante codificación de script. El usuario deberá elegir una primera imagen y seleccionar una imagen secundaria alternativa. Se deberá configurar una acción del mouse para "hacer clic en" o "pasar el mouse por encima" para que se active el desplazamiento. Cuando el mouse se mueve sobre la imagen, la imagen alternativa/secundaria aparecerá pero no permanecerá; cuando el usuario "apague el mouse" alejándolo de la imagen, la imagen de origen original volverá a aparecer. [ cita necesaria ]
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 mantener el mouse o el lápiz óptico sobre el objeto durante un cierto período de tiempo.
En las imágenes, éstas podrán generarse utilizando el atributo HTML title . [3]
<!-- No se recomienda el uso directo. No se ajusta a los estándares web. --> < img id = "myImage" src = "/images/myImage.jpg" onMouseOver = "alert('tu mensaje');" >// Código JavaScript sin ningún marco < ref > var myImg = document . getElementById ( 'miImagen' ); < /ref> function miMensaje () { alerta ( 'tu mensaje' ); } if ( myImg . addEventListener ) { //addEventListener es el método estándar para agregar eventos a objetos. miImg . addEventListener ( 'mouseover' , myMessage , false ); } else if ( myImg.attachEvent ) { // Para Internet Explorer myImg . adjuntarEvento ( 'onmouseover' , miMensaje ); } else { //Para otros navegadores myImg . onmouseover = miMensaje ; } // ejemplo de jQuery. Se degrada bien si JavaScript está deshabilitado en el navegador del cliente. $ ( "img" ). mouseover ( función (){ alerta ( 'tu mensaje' ); });