knorrigt.com

Home > Ordenadores > Cambio de un puntero del ratón en Javascript

Cambio de un puntero del ratón en Javascript

Advertisement

Cambiar el cursor del ratón es una forma sencilla de jazz encima de su página web con increíbles efectos especiales. Ratón estilos cursor puede mejorar la usabilidad de su página Web, proporcionando a sus usuarios con retroalimentación visual adicional, especialmente para los más complejos páginas web de secuencias de comandos, como los juegos y mapas interactivos. JavaScript puede ser utilizado 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 se pueda 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 de 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 incluyen por defecto, en forma de cruz, mano, movimiento, texto, wai y ayuda. Ver "El CSS cursor de la propiedad" vinculado en la sección de Recursos para los detalles completos de todos los estilos básicos del cursor. El estilo del cursor aparece al pasar el cursor sobre un elemento se puede establecer el uso de CSS, como en este ejemplo:

<a style=\"cursor:crosshair\" href=\"#\"> Retículo </a>

Los cursores de ratón de encargo

Además de los cursores básicos, cursores personalizados pueden ser utilizados por seleccionar el estilo de cursor a la dirección de un archivo de cursor o la imagen, como en el siguiente ejemplo:

<a style=\"cursor:URL(arrow.cur), default\" href=\"#\"> encargo del cursor </a>

soporte de los navegadores para los estilos y tipos de archivo de cursor es inconsistente. Por ejemplo, Internet Explorer espera archivos de cursor con .cur o extensiones .ani. Firefox no le gustan los cursores animados (archivos .ani), y espera un cursor de base para ser enumeradas, además de cursor o el archivo de imagen. Para obtener los mejores resultados entre los navegadores, proporcionar un archivo de cursor (o .cur .ani), un archivo de imagen (PNG, JPEG o GIF), y un tipo de cursor básica como punto de retorno. 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 por defecto básico como la opción de reserva final. El navegador intentará cada opción hasta que encuentra uno que puede utilizar.

<a style=\"cursor:URL(arrow.ani), URL(arrow.cur), default\" href=\"#\"> encargo del cursor </a>

La "biblioteca de cursores abierto" vinculado en la sección de Recursos ofrece colecciones de cursor del ratón libre y sin problemas.

Cambiar el estilo del cursor con Inline Javascript

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

onmouseover: puntero del ratón pasa sobre el elemento
onmousedown: botón del ratón pulsado
onmouseup: botón del ratón en libertad
onMouseOut: El puntero del ratón se mueve fuera del elemento
onclick: botón del ratón hace clic
ondblclick: botón del ratón hace doble clic

Consulte el enlace de "Atributos de eventos" en la sección Recursos para obtener más atributos de evento que puede utilizar para añadir acciones de Javascript.

Añadir una acción Javascript para un evento, tal como un ratón por encima, simplemente ajustando el valor del atributo al código Javascript que desea ejecutar. En este ejemplo, el cursor se cambia al cursor de base "ayuda" cuando se pasa el ratón sobre el enlace:

<a onmouseover=\"this.style.cursor='help';\" href=\"#\"> Ayuda </a>

Diversión con Funciones

A veces, usted quiere hacer algo más que encaja 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 de Javascript cambia el estilo del cursor para el elemento de página Web que se pasa como parámetro "el":

function setElementCursor (el) {
el.style.cursor = \&quot;URL(3DArrow.cur), crosshair\&quot;

IR

}

Esta función se encuentra en una sección de la escritura en la cabecera del documento (entre las etiquetas <head> y </ head>), o en un archivo externo código Javascript que se hace referencia en la cabecera del documento. Para utilizar esta función, llamar a la función con la palabra clave "este" de un atributo 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 está enlazado, el cursor visualizado será fijada por la función:

<a onmousemove=\"javascript:setElementCursor(this);\" href=\"#\"> Coloque el cursor para 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 el cuerpo principal de la página web basado en el valor pasado a la función que el parámetro "CurType":

function setMainCursor (curtype) {
switch (curtype) {
case \&quot;loading\&quot; : document.body.style.cursor = \&quot;URL(working.ani), URL(working.png), wait\&quot; ; break

IR

case \&quot;forbidden\&quot;: document.body.style.cursor = \&quot;URL(unavailable.ani), URL(unavailable.png), default\&quot; ; break

IR

case \&quot;default\&quot;:
default: document.body.style.cursor = \&quot;URL(arrow.cur), default\&quot;

IR

}
}

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

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

No hay límite a lo que puede hacer con funciones Javascript. La siguiente función realiza una cuenta atrás, cambiando el cursor del ratón principal de cada segundo una imagen del cursor asociado con la cuenta actual a. La función setTimeout se utiliza para hacer que la función dormir por un segundo antes de que se llama de nuevo con el recuento actualizado.

function doCountdownCursor (count) {
document.body.style.cursor = \&quot;URL(\&quot; + count + \&quot;.ani), URL(\&quot; + count + \&quot;.png), wait\&quot;

IR

count--

IR

if (count > 0) {
setTimeout (\&quot;doCountdownCursor (\&quot; + count + \&quot;)\&quot;, 1000)

IR

}
else {
document.body.style.cursor = \&quot;URL(arrow.cur), default\&quot;

IR

}
}

En la página web, utilice esta función para que cuente el cursor del ratón por debajo de 10 cuando un envío de formulario se hace clic en el botón.

<Input type = \ "submit \" onclick = \ "javascript: doCountdownCursor (10); \" />

A veces, cuando estás navegando en la web, el puntero del ratón puede perderse en un fondo del mismo color, haciendo búsquedas más difícil y menos divertido. Cuando esto se produce en Windows, puede cambiar el color de la Facilidad de menú del sistem
Cómo agregar un punto de mira del puntero del ratón
Cada sistema operativo Windows utiliza un ratón para navegar. Se creó durante la instalación de usar un conjunto predeterminado de imágenes de cursor que cambiar en función de lo que el usuario o el sistema operativo está haciendo en el momento. Algu
Cómo hacer que el puntero del ratón Glow
Los usuarios que estén interesados ​​en jazzing la pantalla de su computadora puede hacer que el resplandor puntero del ratón. Los temas de cursor predeterminado de Windows son un poco deficiente en el factor de diversión, por lo que una descarga gra
Cómo obtener la posición actual del ratón en Javascript
Cuando los visitantes del sitio mueven sus cursores del ratón, se puede realizar un seguimiento de los movimientos usando JavaScript. Una vez conocido el coordenadas X e Y del cursor del usuario, se puede programar la aplicación para interactuar con
La "cola" que aparece detrás de un puntero del ratón es una característica opcional en equipos basados ​​en Windows. Esta "cola" se conoce oficialmente como un "rastro del puntero." Puede ajustar la configuración del ratón en
Cómo cambiar del puntero del ratón en Visual Basic 6
Visual Basic (VB) se considera un lenguaje de programación muy fácil de aprender. Visual Basic es un derivado del antiguo lenguaje de programación básico de DOS. Visual Basic 6.0 fue lanzado en 1998, y Microsoft dejó de soporte para esta versión en m
Cómo ocultar el puntero del ratón Mac
Un problema con los ordenadores de Apple de más edad es que cuando estás viendo un vídeo ampliada el puntero del ratón del Mac todavía aparecerá en la pantalla. Incluso si usted trata de mover el puntero a la parte inferior de la pantalla, que todaví
XNA es un conjunto de aplicaciones de desarrollo de videojuegos creados por Microsoft, que aporta múltiples aspectos de diseño de juegos en un único conjunto de herramientas. juegos XNA se pueden reproducir en equipos basados ​​en Windows, teléfonos
¿Por qué Saltar el puntero del ratón?
El ratón de la computadora viene en muchas formas. Muchos son sin cable y ya no se parecen a los roedores que suministró originalmente el nombre. El movimiento del ratón se traduce en el movimiento del puntero (cursor) en la pantalla, y la integració
Cómo hacer que el puntero del ratón tiene una línea de círculo al hacer clic
La fabricación de su puntero del ratón tiene una pista de círculo cuando se hace clic es algo que se puede hacer desde el Panel de control. Hacer el puntero del ratón tiene una pista de círculo cuando se hace clic con la ayuda de un experto en sistem
¿Qué causa Mi Puntero del ratón para mover por toda la pantalla?
A pesar de algunos problemas de rendimiento del ratón se pueden resolver en uno o dos pasos sencillos, algunos problemas técnicos necesitan un poco más de solución de problemas y la paciencia. Si se ejecuta a través de la siguiente lista, que debe se
Mi hijo de 7 victorias del puntero del ratón no se moverá entre las pantallas
El uso de dos monitores puede aumentar la productividad mediante la ampliación de su escritorio y permite la visualización simultánea de varios programas abiertos. Adecuadamente la configuración de su configuración inicial evitará la mayoría de los t
¿Cuál es la diferencia entre el puntero del ratón y el punto de inserción?
El puntero del ratón y el punto de inserción son términos comunes de equipo. A pesar de que es fácil de usar, tanto en términos de un elemento, en realidad son términos para los diferentes componentes. De vez en cuando el puntero del ratón y el solap
Mi Mac El puntero del ratón es lenta
El puntero del ratón en el ordenador Macintosh se mueve de acuerdo con el ajuste de la velocidad configurada en las preferencias del ratón, y se puede ajustar para aumentar o disminuir la velocidad de seguimiento a su configuración preferida. El ajus
¿Por qué mi puntero del ratón desaparecen repentinamente?
cursores del ratón son una herramienta de utilidad importante, incluso como Windows informática se mueve en un paradigma centrado interfaz de usuario táctil con Windows 8. Cuando usted está utilizando un ratón, trackpad u otro dispositivo señalador,
Cómo reactivar un PC congelada del puntero del ratón
Un puntero del ratón se puede congelar para cualquier número de razones, incluyendo problemas técnicos del sistema, la incompatibilidad del hardware y fallo de hardware. Si el ratón es la congelación regular, tendrán que ser tomadas para solucionar e
En los sistemas informáticos que utilizan un ratón como dispositivo de interfaz de usuario, un puntero del ratón se utiliza para mostrar el usuario de la computadora la ubicación actual del seguimiento del ratón. El puntero del ratón es una herramien
Cómo mover el puntero del ratón Uso de un teclado
Ya sea que su ratón está en el Fritz o simplemente prefieren mantener ambas manos en el teclado en todo momento, no existe un método simple para controlar el puntero del ratón a través del teclado numérico. No sólo se puede controlar el puntero con e
Cómo solucionar problemas de una impresora HP del puntero del ratón
Al igual que otros dispositivos de entrada de computadora, su Hewlett-Packard ratón no es inmune a los problemas, incluyendo el salto puntero del ratón por la pantalla y la congelación en su lugar. Los problemas son frustrantes y más lento, especialm