Cambiar el cursor o puntero del ratón por imágenes personalizadas con CSS

  • Por
Taller de CSS en el que trabajamos con cursores del ratón, colocando imágenes estáticas o animadas que hemos personalizado para cada uno de los elementos de la página web.

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.

Nota: Los tipos de cursor predeterminados para CSS 3 incluyen una gran variedad de punteros que señalan multitud de cosas distintas.

Especial interés tiene el valor "auto", que sería el predeterminado y sirve para indicar que el puntero vaya cambiando según el tipo de contenido sobre el que nos hemos situado. Por ejemplo, que cambie a la mano cuando estamos sobre un enlace o al cursor tipo texto cuando estamos sobre un campo de texto.

Aparte del valor "auto" existen muchos otros valores, cuyo listado podemos ver a continuación:

  • Generales: auto | default | none
  • Links y estado: context-menu | help | pointer | progress | wait
  • Selección: cell | crosshair | text | vertical-text
  • Arrastrar y soltar: alias | copy | move | no-drop | not-allowed
  • Redimensionar y desplazar: e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll
Esta lista la he sacado de una página de Mozilla Developer Network que explica muy bien la sintaxis y tipos de cursores, cursor donde además podremos ver una imagen de cada uno de los cursores predeterminados.

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;
}
Nota: Los cursores de tipo imagen PNG no son compatibles con Internet Explorer, al menos en la versión 9. Por ello, cuando se ponga el ratón encima del titular H1 se mostrará el tipo de cursor predeterminado "progress" en dicho navegador.

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.
Nota: Como sugerencia, si queremos un cursor animado que funcione en Firefox y Chrome, así como Internet Explorer, se me ocurre que podríamos definir con CSS el tipo de cursor "none" (que no muestra ningún cursor) y hacer con Javascript que se muestre una capa acompañando el movimiento del ratón que contenga una imagen animada que queramos utilizar como cursor animado.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Arturin

16/6/2011
En que parte se pone la sintaxis?
Hola...
Antes que nada muchas gracias por tan valiosa información y por compartir sus conocimientos lo cual nos ayuda a ser cada dia mejores... quisiera si es posible.. me puedieran como o donde se pone la sintaxis, estoy tratando de aprender a usar CMS Joomla... ya que no soy programador y quisiera saber como puedo poner esta sintaxis para que a la hora de exponer el sitio web se pueda ver como en el ejemplo que pusieron es decir que cuando se posesiona el cursor sale una imagen y luego al arrastrar el cursor sale otra etc.. .como en el ejemplo de este link http://www.desarrolloweb.com/articulos/ejemplos/css/cursores/muestrocursores-css-animado.html. muchas gracias por lo que me puedan orientar... saludos

anonimo

18/11/2014
ayuda
buenas trades tengo mi pagina en en dreamwaver dividida por imagenes y no logro cambiar el puntero o cursor me podrias ayudar

Tiburon

09/5/2015
Si funciona el cursor
Este post es muy valioso si he logrado acomodar mi propio cursor en mi web Lo pueden ver en funcionamiento aca: http://www.mitiburon.net/

Camilo

22/5/2015
Gracias!!!
amigo tu explicacion Exelente encerio.. lei todo paso a paso y lo pude lograr.. gracias por compartor encerio!!!
lo quengo duda es poner punero en javascrip de la pagina.. solo eso.. lo demas genial!!

Israel

14/10/2017
No cambia mi puntero
Buenas
Trate de cambiar el cursor, pero donde debo guardarlos para que la pagina los reconozca?