Cambiar el puntero del ratón en Javascript

Cambiar el cursor del ratón es una forma sencilla de jazz de su página web con increíbles efectos especiales . Estilos cursor del ratón pueden mejorar la usabilidad de su página web , proporcionando a sus usuarios información visual adicional, sobre todo para las páginas web más complejas secuencias de comandos , como los juegos y mapas interactivos . Javascript puede utilizarse modificar el estilo del cursor del ratón , lo que le permite cambiar el cursor del ratón sobre la base de la fecha de hoy , el informe del tiempo o casi cualquier otra cosa que puedas imaginar. La técnica de usar Javascript , HTML y CSS para crear páginas web dinámicas es DHTML ( HTML dinámico ) . Cursores del ratón básicos

Hay varios cursores del ratón por defecto que se pueden utilizar mediante la modificación del estilo de un elemento de la página o cuerpo del documento. Estos estilos de cursor que puede configurar , cruz , mano, movimiento , texto, wai y ayuda. Ver "La propiedad CSS cursor " vinculado en la sección de Recursos para obtener detalles completos sobre todos los estilos básicos del cursor . El estilo de cursor que aparece cuando se pasa sobre un elemento se puede establecer mediante CSS, como en este ejemplo :

style="cursor:crosshair" href="#"> Cross -hair < /a>
personalizados ratón cursores

Además de los cursores básicos , cursores personalizados se pueden utilizar ajustando el estilo del cursor a la dirección de un archivo de cursor o de imagen , como en el siguiente ejemplo :

style="cursor:url(arrow.cur), default" href="#"> cursor personalizado < /a >

Compatibilidad con navegadores de cursor estilos y tipos de archivo es inconsistente. Por ejemplo , Internet Explorer espera con archivos de cursor . Act o extensiones . Ani. Firefox no le gusta cursores animados (archivos . Ani ) , y espera un cursor de base que se enumeran , además de cursor o el archivo de imagen. Para obtener los mejores resultados entre los navegadores , proporcionar un archivo de cursor ( . Act o . Ani ) , un archivo de imagen ( PNG , JPEG o GIF ) , y un tipo de cursor básica como reserva . En este ejemplo se utiliza un cursor animado por su primera opción , un archivo de cursor claro como la segunda opción y el cursor básica defecto como la opción final de reserva. El navegador intentará cada opción hasta que encuentra uno que puede utilizar.

Style="cursor:url(arrow.ani), url(arrow.cur), default" href="#"> ; cursor personalizado < /a >

la " biblioteca de cursores Open" vinculado en la sección de recursos ofrece , colecciones cursor del ratón sin complicaciones gratis
Cambiar el estilo del cursor . con Inline Javascript

puede cambiar el cursor del ratón estilo CSS con Javascript. Hay varios atributos HTML relacionados con las acciones del ratón se puede utilizar para ejecutar Javascript cuando se hace clic en el ratón, mueve o se cernía sobre un elemento de la página web. Algunos de estos atributos son :

onmouseover : El puntero del ratón se desplaza sobre el elementonmousedown : Botón del ratón pressedonmouseup : Botón del ratón releasedonmouseout : El puntero del ratón se mueve fuera del elementonclick : Ratón botón clickedondblclick : Botón del ratón doble clic
< p> Consulte el enlace "Atributos de eventos " en la sección de Recursos para más atributos de eventos que puede utilizar para agregar acciones de Javascript .

Añada una acción Javascript para un evento, como un mouse -over , simplemente mediante el establecimiento de el valor del atributo en el código Javascript que desea ejecutar. En este ejemplo, el cursor cambia al cursor de base " ayuda" cuando se pasa el ratón sobre el enlace :

Ayuda < /a>
Diversión con funciones

a veces , usted quiere hacer algo más que cabe cómodamente en un atributo de acción del ratón . Al escribir todas sus acciones en una función de JavaScript, se puede meter todo el código en la parte superior del documento HTML, y hacer que el cursor de la magia suceda con una simple llamada a la función en el atributo de evento . Esta sencilla función Javascript cambia el estilo del cursor para el elemento de la página web que se pasa como parámetro "el" :

setElementCursor function (el ) { el.style.cursor = " url ( 3DArrow.cur ) , punto de mira " ; }

Esta función se encuentra en una sección de script en el encabezado del documento ( entre el head y ) , o en un archivo de código Javascript externa hace referencia en el encabezamiento de la documento . Para utilizar esta función , llamar a la función con la palabra clave "this" de un atributo de evento en una etiqueta HTML. La función recibe una referencia al elemento de la página web asociada con el evento de ratón , y cambia su estilo del cursor . Por ejemplo , cuando el puntero del ratón se mueve sobre este texto vinculado , el cursor se muestra serán fijados por la función:

onmousemove="javascript:setElementCursor(this);" href="#"> Coloque el cursor en este enlace < /a >

también puede cambiar el cursor principal que se muestra cuando el cursor se cierne sobre el fondo de la página web. Esta función Javascript que establece el cursor del ratón para que el cuerpo principal de la página web en base al valor que se pasa a la función que el parámetro " CurType ":

setMainCursor función ( CurType ) {switch ( CurType ) {case "carga " : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , espera " ; break; case " prohibido" : document.body.style.cursor url = " ( unavailable.ani ) , url ( unavailable.png ) , por defecto " ; break; case" default " : default: document.body.style.cursor =" url ( arrow.cur ) , por defecto " ;} }

Para utilizar esta función , llama a la función con la " carga, " valor " prohibido" o "default " de un atributo de evento en una etiqueta HTML. Por ejemplo , esta forma de presentar botón activa la función para colocar el cursor en "carga " cuando se hace clic en el botón :

< input type = "submit " onclick = " javascript: setMainCursor ( ' loading '); " />

no hay límite a lo que puedes hacer con las funciones de Javascript . La siguiente función realiza una cuenta atrás cambiando el cursor principal del ratón cada segundo a un cursor de imagen asociada con la cuenta actual . La función setTimeOut se utiliza para hacer que la función de dormir durante un segundo antes de que se vuelva a llamar a la cuenta actualizada.

DoCountdownCursor función ( count) { document.body.style.cursor = " url ( " + cuenta + ". ani) , url ( " + cuenta + ". png ) , espera " , recuento - , if ( contador> 0 ) { setTimeout ( " doCountdownCursor ( " + cuenta + " ) " , 1000) ; } else { document.body.style.cursor = " url ( arrow.cur ) , por defecto" ;} }

En la página web , utilice esta función para que el cursor del ratón cuenta atrás desde 10, cuando una forma de botón de envío se hace clic .