Scribd
Cargar
210 vistas9 páginas

Cómo Personalizar El Cursor Con JavaScript

Este documento explica cómo personalizar el cursor en una página web mediante JavaScript. Describe los diferentes tipos de cursores predeterminados como cruz, puntero, movimiento, etc. y cómo aplicarlos a elementos como enlaces, imágenes y el cuerpo completo de la página. También muestra cómo crear un cursor personalizado y cargarlo desde una URL. Finalmente, incluye un ejemplo de cómo mostrar un cursor de espera temporalmente al hacer clic en un enlace.

Cargado por

Luciano Sosa
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
210 vistas9 páginas

Cómo Personalizar El Cursor Con JavaScript

Este documento explica cómo personalizar el cursor en una página web mediante JavaScript. Describe los diferentes tipos de cursores predeterminados como cruz, puntero, movimiento, etc. y cómo aplicarlos a elementos como enlaces, imágenes y el cuerpo completo de la página. También muestra cómo crear un cursor personalizado y cargarlo desde una URL. Finalmente, incluye un ejemplo de cómo mostrar un cursor de espera temporalmente al hacer clic en un enlace.

Cargado por

Luciano Sosa
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

Olvidaste tuusuario o clave?

o registrate Tutoriales Cursos Videotutoriales Comic

Foros

Blog

Publica un tutorial

Qu es Cristalab?

T ags

Ejemplos

Tutoriales / Cmo personalizar el cursor con JavaScript

Cmo personalizar el cursor con JavaScript


Por M@U el 20 de Septiembre de 2007 con 53,895 visitas HTML, CSS y Javascript Otros tutoriales por M@U.

Te puede i

En este Tip tratar de una manera bastante sencilla como personalizar los cursores en tu web por medio de JavaScript, ya sea solo por esttica 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 fcil 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:...
Cdigo :

<style type="text/css"> p.cruz { Cursor : crosshair;}

1 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

p.normal { Cursor : default} p.puntero { Cursor : pointer;} p.mover { Cursor : move;} p.redimensionarE { Cursor : eresize;} p.redimensionarSE { Cursor : seresize;} p.redimensionarSO { Cursor : swresize;} p.redimensionarS { Cursor : sresize;} p.seleccionTexto { Cursor : text;} p.espera { Cursor : wait;} p.ayuda { Cursor : help;} </style>

Regresar a

Y estos vendran siendo los respectivos cursores, por cada clave:

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

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

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

Tambin esta el poner un botn de ayuda que cargue el cursor de ayuda:..

2 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

Cdigo :

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

<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 links donde quieras que aparezca este efecto tienes que llamara a la funcin
Cdigo :

<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 extensin ".cur" ( ... Ya que este es el tipo estandar que necesita para cargar )... Y subirlo a tu web...
Cdigo :

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 mayora en IE... ), ninguno de los ejemplos anteriores me dio problemas, pero si quieren que suba todos los de IE, tienen alguna duda o sugerencia, hganlo saber... Espero y les sean de utilidad !!!...

Twittear

Me gusta

A 3 personas les gusta esto. S el primero de tus amigos.

3 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

javascript

Envia un comentario (21)

Almacenamiento local en HTML5

Manejar combos multi-niveles con Javascript a partir de un objeto JSON

Por JaLeRu el 20 de Septiembre de 2007

Buen tip, pero no estara mal que des los que Solo funcionan en IE, como dato extra.

Por Bleend el 21 de Septiembre de 2007

Tienes el pack de esos cursores? (el wait esta animado?)

Por Lunatic el 21 de Septiembre de 2007

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

Por M@U el 21 de Septiembre de 2007

JaLeRu :

Buen tip, pero no estara mal que des los que Solo funcionan en IE, como dato extra.

Estan en camino...

4 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

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 tenga, tienes que subirlos ( .cur ) ...

Por Carloz el 21 de Septiembre de 2007

Buen tip!.

Por Bleend el 21 de Septiembre de 2007

Lunatic_blog :

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

Thnks Lunatic!

Por dinosaur el 21 de Septiembre de 2007

Parece que estamos devuelta en el ao 2000, que es lo siguiente "como armar una pagina con frontpage"

Por Seor Oz el 21 de Septiembre de 2007

Y siguen haciendo sus comentarios acerca de tips pasados de moda, por que diablos no dejan que ense como yo?? ehh?? a ver a ver, a veeeeeer, por que no te pones a dar tips nuevoooos, dinosaur???

Por Yaraher el 22 de Septiembre de 2007

5 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

No es tema de ensear a los atrasados o no. Hay temas basicos que pueden ser comentados para aquel recin se inician en este mundo, pero no vale la pena ensear prcticas que actualmente estn desfasada descartadas (es como hacer un tutorial de cmo crear un sitio web y maquetarlo con tablas).

Justamente para el caso de usuarios nveles se que es mejor ensear la forma correcta o actual de realiz que aprendan malas prcticas.

Cul es el problema de, por ejemplo, cambiar el cursor? Es un problema de usabilidad: el usuario de pron ya conoce y al que est acostumbrado, y ms an, el que ya sabe cmo responde segn el contexto, cam

Los ejemplos en este caso no tiene problemas, pero pueden traer de vuelta elementos peligrosos para los de mano por la mano de un dragn, por ejemplo).

De todas formas, el tip es bueno ya que muestra algo que a veces es necesario (cambiar el cursos activo

Por esutoraiki el 22 de Septiembre de 2007

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 camb me hubiera tocado resistir de la idea

Por carlosczg el 24 de Septiembre de 2007

No es que dinosaur sea "malo" o "atorrante", sino que este tipo de tips salen de a montones al poner el tit 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 Jango Fett el 24 de Septiembre de 2007

disculpame m@u pero ya es la 3era vez creo que te critican lo mismo, si quieres ensear a beginners and sea el objetivo por dios, y no te ofendas pues aca nadie es malo, sino que (como bien puedes ver!)a bast 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 carlosczg) a ver otro tipo de posts aqui.

6 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

Por Dario el 14 de Enero de 2009

Mira lo que no se, es por ejemplo, yo tengo una imagen de puntero en la carpeta esa q tiene window etc. El nombre del archivo es Fillitup, es una extension ".cur". la pregunta es: Cmo subo esto a mi pgina?? Lamento no estan al nivel de Clab pero soy muy joven aun para entender tanto de estos temas solo se algunas cosas, pero bueno, agradeceria que me ayudaras ;D

Por Mario el 20 de Marzo de 2009

Ya se que este tip lleva mil aos aqu pero no puedo por menos que agradecerte que lo pusieras, muchsim

Por marceluss el 15 de Mayo de 2009

perfecto, muchas gracias, justo lo que buscaba.

Por kiko el 07 de Junio de 2009

esto es una caca de la vaca

Por michel el 01 de Julio de 2009

ola y espero me puedas responder, quisiera saber si no ay algun codigo o algo para que esos cursores ap sus respectivas funciones sin estar poniendo la clave del cursor en el link en cada vinculo o cada imagen q

7 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

Por byo el 10 de Octubre de 2009

alguien me puede decir como coo puedo cambiar el cursor

Por byo el 10 de Octubre de 2009

yo lo unico que quiero es descargarmelo gratis

Por juan el 29 de Junio de 2010

para nada esto esta desfasado o es una mala practica en absoluto

supon que tienes un div al cual le metes una accion en javascript para que al hacerle click esconda otro div que cursor mostrara el div al ponerse sobre el?

la flechita, si seor, en ese caso necesitamos el cnontenido de este post para que la web gane en usabilid ponerse sobre el div y mostrando la flechita al salirse de ese div, asi que para nada esto es desfasado ni es una mala practica y que te hace pensar que este sitio no es para novatos?

este sitio lo descubri cuando no sabia absolutamente nada de webs y voy cojidito de la mano d el ya unos mucho gracias a ello y sobre colocar esto en cristalab...

estaba buscando la forma de hacer esto y la de cristalab ha sido la mas completa y la mas prctica, acaso

Por Macgdiel el 05 de Julio de 2010

garacias lo utilice mucho

Publica tu comentario

o puedes...

8 de 9

06/12/2012 11:31 a.m.

Cmo personalizar el cursor con JavaScript

http://www.cristalab.com/tutoriales/como-personalizar-el-cursor-con-j...

Tu nombre: S respetuoso. S detallado. Tu comentario: No escribas con mayusculas ni como si fuera un SMS. Insultos, trolls y spammers son siempre eliminados. [b]negrita[/b] [img]http://url/imagen.jpg[/img] [url=direccion]tu enlace[/url]

No ests regis

Blog

Foros

Tutoriales

Tutoriales de Flash

Ejemplos .fla

Anime

Videotutoriales

Cursos

Curso de Flash

9 de 9

06/12/2012 11:31 a.m.

También podría gustarte