ubiquitour.com

Cómo cambiar el Cursor del ratón sobre en JavaScript

La propiedad de "cursor" en el código de hojas de estilo en cascada (CSS) le permite cambiar el que cursor del ratón del usuario aparecerán cuando apunta a un elemento en tu página Web. Puede especificar cursores diferentes para diferentes elementos que ayudan a construir una interfaz de usuario llena de matices, o pueden cambiar la propiedad cursor del elemento "body" cambiar el cursor por toda la página. JavaScript puede usarse para declarar y cambiar las propiedades CSS, así que usted puede reasignar dinámicamente la propiedad de "cursor" de varios elementos en la página.

Instrucciones

1 Coloque el código siguiente entre las etiquetas "head" del documento HTML:

< script tipo = "texto/javascript" >

función changeCursorById(ref,cur) {}

document.getElementById (ref).style.cursor = cur;

}

< /script >

2 Agregue el código siguiente en el cuerpo del documento HTML para ver cómo funciona la función:

< tipo de entrada = "botón" id = "bu1" valor = "Cambio Cursor" onClick="changeCursorById('bu1','crosshair');" / >

El botón producido va a cambiar su propiedad de "cursor" al hacer clic. El valor del atributo "id" se utiliza para identificar el elemento a la función.

3 Utilizar cualquiera de los siguientes valores para la propiedad de "cursor": "ayuda", "mover", "puntero", "el progreso", "texto", "esperar", "Cruz", "n-resize," "ne-resize," "e-resize," "se-resize," "s-tamaño", "sw-resize," "w-resize" y "nw-resize." También se puede usar "auto", "por defecto" y "heredar". Si selecciona "auto", se asigna el cursor que el navegador normalmente se utilizaría para ese elemento. Si selecciona "default", se utiliza el cursor de flecha regular. Un ejemplo de la distinción es que si se asigna "por defecto" a una etiqueta de "p", el cursor no va a cambiar a una viga como haría normalmente sobre el párrafo, pero permanecerá como la flecha por defecto. "Heredar" asigna el mismo cursor al elemento como su elemento primario (el está anidada dentro de la etiqueta).

4 Cambiar el cursor a una imagen personalizada como esta:

changeCursorById('bu1','URL(customcursor.cur)');

Imágenes de cursor deben almacenarse en el servidor como archivos "cur" o "ani".

5 Utilice la siguiente función para cambiar la propiedad cursor de todos los elementos de un tipo en una página:

función changeCursorByTagName(tag,cur) {}

para (var i = 0; i < document.getElementsByTagName (tag) .length; i ++) {}

document.getElementsByTagName(tag)[i].style.cursor = cur;

}

}

Utilizar un nombre de etiqueta, como "p", en lugar de un ID.