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 !!!...
Por Lunatic el 21 de Septiembre de 2007
JaLeRu :
Bleend :
Lunatic_blog :
Thnks Lunatic!
Por dinosaur el 21 de Septiembre de 2007
Por Señor Oz el 21 de Septiembre de 2007
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).
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 carlosczg el 24 de Septiembre de 2007
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
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 Dario el 14 de Enero de 2009
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: ¿Cómo subo esto a mi página??
Lamento no estan al nivel de Clab
pero soy muy joven aun para entender
tanto de estos temas
cosas, pero bueno, agradeceria que
me ayudaras ;D
Por Mario el 20 de Marzo de 2009
Por marceluss el 15 de Mayo de 2009
Por kiko el 07 de Junio de 2009
Por michel el 01 de Julio de 2009
Por byo el 10 de Octubre de 2009
Por byo el 10 de Octubre de 2009
Por juan el 29 de Junio de 2010
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 señor, en ese caso necesitamos el cnontenido de este post para que la web gane en usabilidad mostrando la manita al 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 5 años y he aprendido 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 práctica, acaso tiene algo de malo?
Por Macgdiel el 05 de Julio de 2010