Personalizar puntero del ratón

Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del ratón: la típica flechita o cualquier otro dibujo que puede tener. En este artículo veremos cómo se puede cambiar el cursor CSS de un elemento de la página, esto es, cambiar la imagen del cursor al posicionarse con el ratón sobre elementos de la página que nosotros queramos.

En Windows podemos encontrar varios cursores que se activan cuando pasamos por “ciertas zonas” de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la típica flechita (denominada default en CSS) cambia por la manito (pointer). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.

Con la ayuda de las hojas de estilo en cascada, podemos forzar a nuestro sistema navegador que no se rija con las normas convencionales de los punteros, logrando así un atractivo diseño web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creación.

A continuación presentamos una la lista de los cursores disponibles por defecto en Windows, y que también tendremos disponibles con CSS. En este listado aparece el nombre del cursor (nombre de la pesudoclase CSS que tenemos que utilizar para cambiar el cursor) y el tipo de cursor que se trata.

• default (flecha)
• crosshair (cruz)
• e-resize (flecha que apunta a la derecha)
• hand (mano)
• help (signo de pregunta)
• move (cruz con flechas en los extremos)
• n-resize (flecha que apunta hacia arriba)
• ne-resize (flecha que apunta al noreste)
• nw-resize (flecha que apunta al noroeste)
• pointer (mano)
• s-resize (flecha que apunta hacia abajo)
• se-resize (flecha que apunta hacia el sudeste)
• sw-resize (flecha que apunta hacia el sudoeste)
• text (I-beam)
• w-resize (flecha que apunta a la izquierda)
• wait (reloj de arena)

Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.

Para cambiar el cursor en toda la página podemos utilizar:

body {cursor: pointer}

O aplicarlo a una parte de la página utilizando una clase CSS, por ejemplo:

.button {cursor: pointer}

También es posible añadir un cursor personalizado:

body {cursor : url("find.cur")}

Ver ejemplo en funcionamiento