Contenido
- Cursores básicos del ratón
- Cursores personalizados del ratón
- Cambiar el estilo del cursor con Inline Javascript
- Jugar con funciones
Cambiar el cursor del ratón es una forma sencilla de añadir efectos especiales a su página web. Esto puede mejorar la usabilidad ya que proporciona a los usuarios ayudas visuales adicionales, especialmente en páginas más complejas como juegos y mapas interactivos. Puede utilizar Javascript para cambiar el estilo del cursor de acuerdo con la fecha, la previsión del tiempo y cualquier otra cosa. La técnica de usar Javascript, HTML y CSS para crear páginas web dinámicas es conocida como DHTML (HTML dinámico).
Cursores básicos del ratón
Hay varios cursores de ratón estándar que se pueden utilizar modificando el estilo de un elemento o el cuerpo de la página. Los nombres son "default", "crosshair", "hand", "mueve", "text", "wait" y "help". Vea el enlace "La propiedad cursor CSS" de la sección "Recursos" para más detalles sobre ellos. Utilice CSS para establecer el cursor que se muestra al pasar encima de un elemento de la siguiente manera:
Retículo
Cursores personalizados del ratón
Además de los cursores básicos, puede utilizar plantillas personalizadas configurando como estilo de cursor la dirección de un archivo de imagen, como en el ejemplo siguiente:
Custom cursor
No todos los navegadores soportan esta característica o todos los tipos de archivos. Por ejemplo, Internet Explorer espera archivos con extensión ".cur" o ".ani". Firefox no acepta cursores animados (".ani") y espera un cursor básico más allá de la imagen. Para obtener los mejores resultados, indique un archivo de cursor (".cur" o ".ani"), un archivo de imagen (PNG, JPEG o GIF) y un tipo de cursor básico como respaldo. El siguiente ejemplo utiliza un cursor animado como primera opción, un archivo simple en el segundo lugar y el cursor básico como última opción. El explorador intentará todas las opciones hasta encontrar una que pueda utilizar:
Custom cursor
La "Open Cursor Library" de la sección "Recursos" ofrece colecciones de cursores para el ratón gratuitos.
Cambiar el estilo del cursor con Inline Javascript
Puede cambiar el estilo CSS del cursor mediante Javascript. Hay varios atributos HTML relacionados con acciones de mouse que se pueden utilizar para ejecutar código al hacer clic, mover o pasar el mouse por encima de un elemento de la página. Algunos ejemplos son:
onmouseover: El puntero del ratón pasa por encima de un elemento. onmousedown: Se presiona el botón del ratón. onmouseup: Se suelta el botón del ratón. onmouseout: El puntero del ratón sale del elemento. ondblclick: El usuario hace doble clic con el ratón.
En el enlace "Event Attributes" de la sección "Recursos" encontrará más atributos que puede utilizar para agregar acciones con Javascript.
Agregue una acción a un evento (por ejemplo "mouseover") estableciendo como valor del atributo el código que desea ejecutar. En el ejemplo siguiente, el cursor cambiará al de "ayuda" al pasar el ratón por encima del enlace.
ayudar
Jugar con funciones
A veces, usted deseará hacer más que un atributo permite. Escribiendo todas las acciones en una función de Javascript, puede colocar todo el código en la parte superior de su documento HTML y aplicarlo a cualquier elemento haciendo una llamada en el atributo del evento. El siguiente código cambia el cursor en el elemento pasado como parámetro "el":
function setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
La función se encuentra en la sección de secuencia de comandos del encabezado del documento (entre las etiquetas
y ) o en un archivo de código externo al que se hace referencia en la misma parte. Para utilizarla, llame a la función con la palabra clave "this" de un atributo de evento en una etiqueta HTML. La función recibirá una referencia al elemento asociado al evento del ratón y cambiará el estilo del cursor. Por ejemplo, si el puntero pasa por encima del texto siguiente, el cursor cambiará:El cursor cambiará en este enlace
También puede cambiar el cursor principal que se muestra al pasar el ratón por encima del fondo de la página. La siguiente función permitirá cambiar el cursor al tipo indicado en el parámetro "curtype":
() () () () () () () () () () () () () () () () () () () (). (en el caso de que se produzca un error). (en el caso de que se produzca un error).
Para utilizarla, llámela con el valor "loading", "forbidden" o "default" de un atributo de evento en una etiqueta HTML. Por ejemplo, el siguiente botón cambiará el cursor a "loading" al hacer clic:
El lenguaje Javascript tiene una funcionalidad ilimitada. El código siguiente realizará una cuenta regresiva y cada segundo cambiará el cursor del ratón a una imagen asociada al valor actual. La función "setTimeOut" dejará la función suspendida por un segundo antes de volver a llamar y actualizar el contador.
("+ count +" .ani), url ("+ count +" .png), wait "GO count - GO if (count> 0) }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}.
En la página web, utilice la función para mostrar el recuento en el cursor del ratón haciendo clic en un botón en un formulario.