Normalmente, cuando navegamos en una página, el puntero del ratón es una flecha y, cuando nos colocamos sobre ciertos elementos, cambia. Esa es la forma en que se nos indica "acá hay algo diferente".
Los navegadores utilizan esos cursores de manera predeterminada, así, un enlace mostrará una mano y una entrada en un formulario será una I que nos indica que podemos escribir un texto. Cada uno de ellos está asociado con algún elemento.
Los navegadores utilizan esos cursores de manera predeterminada, así, un enlace mostrará una mano y una entrada en un formulario será una I que nos indica que podemos escribir un texto. Cada uno de ellos está asociado con algún elemento.
El CSS nos permite ignorar estos datos y establecer el tipo de cursor a utilizar o emplear cursores personales. La sintaxis es muy simple:
cursor: valor;
Por ejemplo:
a {cursor: pointer;}
img {cursor: pointer;}
style="cursor: pointer;"Estos son los cursores predeterminados y sus valores:
 default | ||
 pointer |  text |  crosshair |
 wait |  move |  help |
Un caso especial es el tipo resize que no se usa directamente sino que requiere que se indique la dirección:
 n-resize | e-resize | s-resize | w-resize |
| ne-resize | se-resize | sw-resize | nw-resize |
Los cursores son parte de los navegadores así que, dependiendo de cuál utilicemos, habrá ciertas variaciones. En las últimas versiones, a partir de IE6 se han agregado más posibilidades. Algunas de ellas son utilizadas por todos, otras sólo son accesibles por uno u otro. Para ver el resultado, basta poner el puntero sobre la imagen:
 progress |  no-drop | all-scroll | not-allowed |
row-resize | col-resize | vertical-text |  copy / -moz-copy |
alias / -moz-alias | nwse-resize | nesw-resize | cell / -moz-cell |
-moz-zoom-out | -moz-zoom-in | -moz-grabbing | -moz-grab |
Como si esto fuera poco, la propiedad nos permite utilizar cursores personales, para esto, basta indicar la dirección URL de la imagen.
Aquí comienzan los problemas, diferencias e incógnitas. Internet Explores sólo soporta los formatos CUR o ANI. Firefox soporta imágenes PNG, JPG, CUR y GIF pero no cursores ANI. Además, si el GIF es animado se mostrará estático.
Lo razonable es colocar siempre un cursor alternativo, en IE no es obligatorio pero en Firefox sí, si no lo hacemos, simplemente no funciona. La sintaxis es la siguiente:
Aquí comienzan los problemas, diferencias e incógnitas. Internet Explores sólo soporta los formatos CUR o ANI. Firefox soporta imágenes PNG, JPG, CUR y GIF pero no cursores ANI. Además, si el GIF es animado se mostrará estático.
Lo razonable es colocar siempre un cursor alternativo, en IE no es obligatorio pero en Firefox sí, si no lo hacemos, simplemente no funciona. La sintaxis es la siguiente:
cursor:url('URL_imagen'), auto;"Lo normal es utilizar el valor auto como puntero alternativo pero, puede ser cualquier otro.
REFERENCIAS:
16 comentarios:
no veooo na' en el .ANI....por qué será doctor? estaré enferma?
No señora, para nada, tal como dice ahí, si usas Firefox, no se ven los ANI pero, a cambio ves los GIFS, JPG y PNG.
Voy a aclararlo en los ejemplos del post por las dudas no haya quedado claro :)
Oh noo!! 2-0 , pero que te pasa Jmiur!! ahora aparte de convertirme en señora, me hace dar cuenta que soy una "pajaroncits"! Bueno, tengo algo de eso, ya que soy una catita, pero que no se note :$
No fue mi intención, madame :D
De cualquier forma, como alguien más también puede pasarlo por alto, lo he puesto para que quedara más claro.
Te quedó muy bueno el post ^^
una duda...
donde puedo alojar las imagenes .cur y .ani , lo digo porque imagechac y otras solo permiten gif o jpg?
gracias de antemano.
Puedes probar con FileDen o con Google PageCreator.
Jaja, no sabia que FireFox aceptara los formatos de imagen también(Definitivo me quedo con FF), aun que me hubiera gustado ver un formato animado también.
Gracias, buen aporte y excelente Blog! =D
SIN COMENTARIOS REALMENTE CON TODO LO LEIDO AQUI ESTOY MAS QUE CLARA CON RESPECTO AL PROGRAMA DE FIREFOX QUE UTILIZO.
Tengo una duda, he cambiado el cursor que sale por defecto y el que sale en los enlaces, pero ¿cómo cambio el cursor que sale cuando se está cargando algo? el cursor wait, quiero que en lugar del cursor wait normal salga otro que yo haya subido a algún servidor
Con CSS se pueden modificar lso cursores de los elementos de una página pero hHay cursores que no pueden ser modificados porque son propios del navegador.
vale gracias, de todos modos también me sirve, gracias
Amigo si quiero colocar una imagen .CUR ó .jpg donde coloco ese codigo, en que parte de la plantilla, gracias
cursor es una propeidad CSS así que va con las demás. Por ejemplo:
a {
color: red;
cursor:url('URL_imagen'), auto;"
text-decoration: underline;
}
¿Que ocurre con otros navegadores?
En principio, funcionan como en Firefox. El único diferente es IE.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...