Por ejemplo, si estamos delante de una imagen y queremos indicar al usuario que la podemos aumentar, podríamos hacer que al entrar en ella, en vez de aparecer la típica fecha o la mano, apareciese una lupa o cualquier otro elemento.
Hacer esto hoy en día es muy sencillo gracias a las muchas propiedades que nos ofrece CSS3. En este caso, disponemos de la propiedad “cursor” al que le indicaremos la imagen que queremos utilizar para ello.
Veamos un ejemplo de cómo realizar el cambio del cursor mediante esta propiedad.
body {
cursor: url('mi-cursor.ico'), default;
}
En este caso le estamos indicando que dentro del body utilice siempre como cursor la imagen “mi-cursor.ico”. Si nos fijamos, también le indicamos un cursor por defecto, para que en caso de que fallase, se mostrase el que incorpora el navegador.
Al utilizar la propiedad “cursor”, también debemos tener en cuenta que dependiendo del navegador que utilicemos, la imagen se podrá ver de una u otra forma. Así, en el caso de Firefox, tiende a ajustar la imagen a un tamaño más pequeño que por ejemplo en el caso del navegador Chrome.
También hay que tener en cuenta, que si lo vamos a utilizar en nuestros proyectos, al utilizar técnicas basadas en CSS3, los navegadores más antiguos no reconocerán esta propiedad.