Cristalab

Estás en: Cristalab > Tips > Cómo personalizar el cursor con JavaScript

Cómo personalizar el cursor con JavaScript

Por: M@U + 20.09.2007

En este Tip trataré de una manera bastante sencilla como personalizar los cursores en tu web por medio de JavaScript, ya sea solo por estética o por funcionabilidad, todo depende de ti...

Previamente se posteo un buen Tip sobre como impedir que sea seleccionable el contenido de toda tu pagina ( publicado por Carloz.Yanez )... El único inconveniente que tienen este tipo de hacks es que el cursor sigue cambiando al pasar sobre campos de texto o links, pero es fácil removerlo, tan solo:

De esta manera obligas a utilizar el cursor que esta de default en toda la pagina... Pero no estas sujeto solo a este cursor ya que existen unos pocos mas preestablecidos en el sistema, por ejemplo:...

Código :

<style type="text/css"> 
p.cruz  { Cursor : crosshair;}
p.normal  { Cursor : default}
p.puntero  { Cursor : pointer;}
p.mover  { Cursor : move;}

p.redimensionarE  { Cursor : e-resize;}
p.redimensionarSE  { Cursor : se-resize;}
p.redimensionarSO  { Cursor : sw-resize;}
p.redimensionarS  { Cursor : s-resize;}

p.seleccionTexto  { Cursor : text;}
p.espera  { Cursor : wait;}
p.ayuda  { Cursor : help;}
</style>


Y estos vendrían siendo los respectivos cursores, por cada clave:



Pero ¿cómo es que puedo utilizar esto? Solamente debes agregar el nombre clave del cursor en el link que lo vayas a utilizar, por ejemplo:..

Código :

<p class="redimensionarSO  ">Redimensionar</p>
O tambien puedes hacer que este cambie; en todos los links, en tus imagenes, o en todo el cuerpo de tu pagina, por ejemplo:..

Código :

a{Cursor:wait;}
img{Cursor:crosshair;}
body{Cursor:help;}


También esta el poner un botón de ayuda que cargue el cursor de ayuda:..

Código :

<!-- En un enlace solo agregas lo siguiente-->
<a href="#" style="cursor:help">enlace</a>


Pero si te quieres ir, a algo un poco mas avanzado... ¿Por que no?
En este ejemplo, al oprimir un vinculo de tu pagina aparecerá el cursor de "espera" por 5 segundos, luego cambiara a la normalidad.

Código :

<script language="javascript">
function cualquierLink(){document.body.style.cursor = "[b]wait[/b]";
        setTimeout("document.body.style.cursor = 'default'", [b]5000[/b]);}
</script>


Ahora, en los link´s donde quieras que aparezca este efecto tienes que llamara a la función

Código :

<a href="#" onclick="cualquierLink()"> El link con el efecto</a>


O inclusive llamar a tu propio cursor personalizado... Solo debes crear un cursor con la extensión ".cur" ( ... Ya que este es el tipo estandar que necesita para cargar )... Y subirlo a tu web...

Código :

body{cursor:url(http://www.cristalab.com/images/cursor_personalizado.cur);}


Pd: Omití varios ejemplos por que solo funcionan en un tipo de navegador ( La mayoría en IE... ), ninguno de los ejemplos anteriores me dio problemas, pero si quieren que suba todos los de IE, tienen alguna duda o sugerencia, háganlo saber... Espero y les sean de utilidad !!!...

Etiquetas javascript

Comentarios | Enviar un comentario
Buen tip, pero no estaría mal que des los que Solo funcionan en IE, como dato extra.
Por: JaLeRu
¿Tienes el pack de esos cursores? (el wait esta animado?)
Por: Bleend
@Bleend: http://blogs.vertigosoftware.com/alanl/archive/2006/06/28/Vista_Cursors_on_Windows_XP.aspx
Por: Lunatic_blog

JaLeRu :

Buen tip, pero no estaría mal que des los que Solo funcionan en IE, como dato extra.
Estan en camino...
Sonrisa

Bleend :

¿Tienes el pack de esos cursores? (el wait esta animado?)
Los cursores son los que tengas establecidos... ( Aunque ya te respondieron... )... Solo que si quieres que el usuario tambien los tenga, tienes que subirlos ( .cur ) ...
Riendo
Por: M@U
Buen tip!.
Por: Carloz.Yanez

Lunatic_blog :

@Bleend: http://blogs.vertigosoftware.com/alanl/archive/2006/06/28/Vista_Cursors_on_Windows_XP.aspx

Thnks Lunatic!
Por: Bleend
Parece que estamos devuelta en el año 2000, que es lo siguiente "como armar una pagina con frontpage"??
Por: dinosaur_blog
Y siguen haciendo sus comentarios acerca de tips pasados de moda, por que diablos no dejan que enseñen a los mas atrasados, como yo?? ehh?? a ver a ver, a veeeeeer, por que no te pones a dar tips nuevoooos, dinosaur???
Por: Señor Oz_blog
No es tema de enseñar a los atrasados o no. Hay temas basicos que pueden ser comentados para aquellos que recién se inician en este mundo, pero no vale la pena enseñar prácticas que actualmente están desfasadas o descartadas (es como hacer un tutorial de cómo crear un sitio web y maquetarlo con tablas).

Justamente para el caso de usuarios nóveles se que es mejor enseñar la forma correcta o actual de realizar las cosas, para evitar que aprendan malas prácticas.

¿Cuál es el problema de, por ejemplo, cambiar el cursor? Es un problema de usabilidad: el usuario de pronto ve que el cursor que ya conoce y al que está acostumbrado, y más aún, el que ya sabe cómo responde según el contexto, cambia de pronto.

Los ejemplos en este caso no tiene problemas, pero pueden traer de vuelta elementos peligrosos para los usuarios (cambiar cursor de mano por la mano de un dragón, por ejemplo).

De todas formas, el tip es bueno ya que muestra algo que a veces es necesario (cambiar el cursos activo por otro con CSS).
Por: Yaraher
M@U

Esta bien el tip. No me parece algo descabellado ni loco forzar el mouse a un estado.

Una vez hice un menu con javascript que no utilizaba la etiqueta a para vincular, si no hubiera podido cambiar el mouse la verdad me hubiera tocado resistir de la idea
Por: esutoraiki
No es que dinosaur sea "malo" o "atorrante", sino que este tipo de tips salen de a montones al poner el titulo en google. Por otro lado cristalab siempre ha colocado cosas interesantes, y no tan faciles de encontrar..
Me parece que esta un toque fuera del nivel de los posts a los que estoy acostumbrado ver aqui.
Por: carlosczg_blog
disculpame m@u pero ya es la 3era vez creo que te critican lo mismo, si quieres enseñar a beginners anda a un foro donde ese sea el objetivo por dios, y no te ofendas pues aca nadie es malo, sino que (como bien puedes ver!)a bastantes participantes de clab esto les parece obsoleto, claro que hay maneras para decirlo y algunos no elgien la mejor.

Bueno espero tomes en cuenta esto, te escribo en serio sin el fin de ofender a nadie. Amo CLAB y estoy acostumbrado(como dice carlosczg) a ver otro tipo de posts aqui.
Por: Jango Fett_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.