En artículos anteriores del Taller de CSS ya estuvimos tratando sobre los cursores CSS y cómo configurarlos. Sin embargo, nos había quedado pendiente hablar sobre cómo utilizar imágenes totalmente personalizadas en los cursores, en vez de utilizar los modelos que el usuario tenga configurados en su sistema.

En este artículo vamos a ver como podemos trabajar con cursores de tipo imagen, es decir, cómo podemos cambiar el puntero del ratón para no utilizar la típica flechita, sino una imagen que personalice un poco más el aspecto de nuestro sitio web. Todo ello a través de las Hojas de Estilo en Cascada y en la medida de lo posible, siendo compatibles con todos los navegadores.

Desde CSS 2 se pueden alterar los punteros del ratón para colocar imágenes personalizadas, ya sea a través de ficheros gráficos conocidos, como puede ser el GIF o a través del formato de archivo propio de los cursores, es decir .cur para los cursores normales y .ani para los cursores animados. El modo de trabajo es bien simple, pero donde podremos encontrar dificultad es en la compatibilidad con los distintos navegadores que puede usar un visitante para acceder a nuestra web. No obstante, existen técnicas para intentar solventar posibles fallos de compatibilidad que veremos a continuación.

Sintaxis para declaración de cursores en CSS

El modo en el que se declaran los cursores que se desea utilizar al situar el ratón sobre un elemento es muy parecido, tanto en CSS 2 como en CSS 3. La única diferencia entre esas dos versiones del lenguaje se basa principalmente en el rango de cursores predeterminados que se pueden utilizar (la flecha normal, el cursor que indica "ocupado", la mano que indica enlace, etc).

Para declarar un cursor se utiliza el atributo "cursor:", seguido de las distintas opciones que queremos colocar, por orden de preferencia, separadas por coma. Entre las opciones que podemos utilizar se encuentran imágenes, archivos gráficos de tipo cursor o varias palabras clave para especificar un tipo de cursor predeterminado.

Un ejemplo sería el siguiente:

body{
   cursor: url(imagen1.gif), url(cursor.cur), pointer;
}

En el anterior caso, el navegador intentará colocar como cursor en el cuerpo de la página la "imagen1.gif" y si no es compatible con ese tipo de archivo gráfico en el cursor, colocará el archivo "cursor.cur" y si tampoco es compatible colocará el cursor predeterminado tipo "pointer" que es la típica flecha del ratón.

Ejemplo de configuración de cursores con archivos externos y alternativa en predeterminado

Ahora vamos a ver un primer ejemplo de cursores configurados a través de archivos externos de tipo .cur y de tipo .png.

body {
   cursor: url(nat870.cur), pointer;
}
h1{
   cursor: url(logodw.png), progress;
}
a, a:hover{
   cursor: url(sym596.cur), help;
}

Podemos ver ese ejemplo en una página aparte

Compatibilidad con los cursores en los navegadores más habituales

No todos los tipos de cursor son soportados por todos los navegadores y por ello tenemos que tener especial atención a la hora de utilizarlos, de modo que especifiquemos distintas alternativas que sirvan para cada uno de los clientes más habituales. Por ejemplo, en el momento de escribir este artículo, los cursores animados no funcionan en Firefox o Google Chrome.

En estos momentos podemos tener en cuenta esta lista de posibles valores y sus consideraciones:

• Los cursores estáticos de tipo .cur los podemos utilizar en todos los navegadores, por lo que son una opción muy indicada si no queremos tener problemas.
• Los cursores de tipo .ani (cursores animados) solamente funcionan en Internet Explorer, por lo que si deseamos utilizarlos, debemos especificar una alternativa para los otros navegadores.
• Los cursores de tipo imagen (GIF o PNG) no funcionan en Internet Explorer, por lo que deberíamos asignar una alternativa para este navegador. Cursores tipo JPG no me funcionan
• El tipo especial de cursor GIF Animado no funciona en Internet Explorer y en Firefox y Chrome solo muestra el primer fotograma del GIF, por lo que no veremos animación.

Como se dijo, podemos indicar un cursor a través de distintas alternativas separadas por coma. Veamos el siguiente ejemplo para ilustrar ese uso:

body {
   cursor: url(foo51.ani), url(dw.gif), auto;
}
h1{
   cursor: url(spain-white.gif), url(too879.ani), e-resize;
}
a, a:hover{
   cursor: url(golf_b.gif), url(use175.ani), pointer;
}

El ejemplo anterior se puede ver accediendo a este enlace.

Puedes verlo tanto en Internet Explorer como Firefox y Chrome para apreciar las diferencias entre unos y otros navegadores, comprobando como los cursores que se muestran serán distintos dependiendo de la compatibilidad que tenga cada browser con cada tipo de cursor utilizado.

Desplazamiento del cursor

Queremos acabar este artículo comentando la posibilidad de desplazar la imagen utilizada para el cursor, que es una característica de la definición de las Hojas de Estilo en Cascada CSS 3. Se trata simplemente de asignar unos valores numéricos, coordenadas X e Y, a los cursores que deseemos, para desplazar la imagen del cursor en esa cantidad de píxeles.

body {
   cursor: url(foo51.ani), url(dw.gif) 20 10, auto;
}

Como se puede ver, la alternativa de cursor url(dw.gif) tiene los valores 20 10, para producir un desplazamiento de la imagen del cursor en 20 y 10 píxles en las coordenadas X e Y.

Este detalle de momento no funciona en Internet Explorer 9, por ello es mejor ni utilizarlo por el momento, puesto que IE no entenderá eso y no mostrará ningún cursor, ni siquiera el valor que sí que entendería (cursor foo51.ani).

Conclusión sobre cursores con archivos gráficos

El uso de cursores podrá dar un punto adicional de personalización de nuestra página web. Ojo al utilizarlos, puesto que determinados usuarios pueden sentirse extrañados al ver que cambia el puntero del ratón, mostrando formas que quizás no les resulten claras para ellos. De hecho, no creo que utilizar cursores tenga mucha usabilidad, pero la opción está ahí disponible para el que le parezca un detalle estéticamente agradable.

En definitiva, hemos visto que existen diversas configuraciones de cursores y que podemos utilizar unas u otras dependiendo del navegador, pues no todos los navegadores son compatibles con todos los tipos de cursor. Especificando alternativas nos ahorraremos inconvenientes de uso de cursores que no funcionen en distintas plataformas. Recordar siempre que los cursores .cur funcionan en todos los navegadores, por lo que serán adecuados en cualquier proyecto.

Si quieres aumentar tus conocimientos a la hora de crear tus propios punteros puedes echarle un vistazo al programa JustCursors.