JMiur [E]

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.


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:
cursor:url('URL_imagen'), auto;"
Lo normal es utilizar el valor auto como puntero alternativo pero, puede ser cualquier otro.

Imágenes en formato CUR
Imágenes en formato ANI (sólo en Internet Explorer)
Otros formatos de imágenes (sólo en Firefox)
PNGJPGGIF

REFERENCIAS:
  • w3.org

  • mozilla.org

  • msdn
  • 16 comentarios:

    CaTa  

    no veooo na' en el .ANI....por qué será doctor? estaré enferma?

    Responder
    JMiur  

    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 :)

    Responder
    CaTa_Distraída  

    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 :$

    Responder
    JMiur  

    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.

    Responder
    Anónimo  

    Te quedó muy bueno el post ^^

    Responder
    antoniocamel  

    una duda...
    donde puedo alojar las imagenes .cur y .ani , lo digo porque imagechac y otras solo permiten gif o jpg?

    gracias de antemano.

    Responder
    JMiur  

    Puedes probar con FileDen o con Google PageCreator.

    Responder
    Safiro  

    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

    Responder
    Anónimo  

    SIN COMENTARIOS REALMENTE CON TODO LO LEIDO AQUI ESTOY MAS QUE CLARA CON RESPECTO AL PROGRAMA DE FIREFOX QUE UTILIZO.

    Responder
    Alex y Raúl  

    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

    Responder
    JMiur  

    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.

    Responder
    Alex y Raúl  

    vale gracias, de todos modos también me sirve, gracias

    Responder
    cargohe  

    Amigo si quiero colocar una imagen .CUR ó .jpg donde coloco ese codigo, en que parte de la plantilla, gracias

    Responder
    JMiur  

    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;
    }

    Responder
    popcorn  

    ¿Que ocurre con otros navegadores?

    Responder
    JMiur  

    En principio, funcionan como en Firefox. El único diferente es IE.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    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 ...

     
    CERRAR