Comunidad de diseño web y desarrollo en internet

Cómo personalizar el cursor con JavaScript

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:

  • Cambiando <body> por: <body style="cursor:default">

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>
  • NOTA: El 5000 es el tiempo que dura el cursor de espera expresado en milisegundos... Y el "wait" es el cursor de espera, igual puedes poner el que quieras...


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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate