cambiar imagen del cursor en el estado WAIT

Tarzan · #1 (**permalink**) 08/02/2006, 09:24

Hola a todos,

¿Alguien sabría decirme como puedo asignar un fichero .cur al cursor de mi página cuando está en el estado wait..?

Hasta ahora he podido modificar la imagen del cursor en el estado normal y cuando se sitúa sobre algún enlace... Pero cuando pulso un enlace o cuando el navegador está cargando algo (una página, una imagen, etc..) el cursor toma la forma de la flecha blanca y el reloj de arena predefinidos...

Me gustaría que en este estado (wait, busy).. el cursor adoptara la forma de una imagen personalizada..

¿Alguien sabe como hacerlo?

Gracias. 1 saludo.

ludovico2000 · #2 (**permalink**) 08/02/2006, 10:08

Aquí tienes los cursores, sólo tendrías que aplicarlo con javascript al evento que quieras:

Código:

<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<p style="cursor: default">Cursor default</p>
<p style="cursor: crosshair">Cursor crosshair</p>
<p style="cursor: pointer">Cursor pointer</p>
<p style="cursor: move">Cursor move</p>
<p style="cursor: nw-resize">Cursor nw-resize</p>
<p style="cursor: ne-resize">Cursor ne-resize</p>
<p style="cursor: n-resize">Cursor n-resize</p>
<p style="cursor: e-resize">Cursor e-resize</p>
<p style="cursor: help">Cursor move</p>
<p style="cursor: text">Cursor text</p>
<p style="cursor: wait">Cursor wait</p>
</body>
</html>

si necesitas más detalle, coméntalo en el foro de javascript.

Tarzan · #3 (**permalink**) 08/02/2006, 11:27

Gracias ludovico2000,

He comentado el problema en el foro de javascript... Ahora mismo no sabría resolverlo..

De todas formas, el código que me has mostrado no lo entiendo muy bien... Se supone que defines todos los estados mediante la etiqueta p.. ¿Cómo empleas un cursor u otro?...

¿Sería posible utilizar ese código en una hoja de estilos?.. Tengo varias páginas y de esa forma sólo tendría que escribir el código una vez..

Gracias por todo.

un saludo.

ludovico2000 · #4 (**permalink**) 08/02/2006, 11:52

En el código que te he puesto simplemente aparecen diferentes párrafos (<p>) a los que se asigna un estilo (style:...) En ese estilo se define que el cursor será uno u otro (pruébalo y pasa el cursor por encima, verás cómo cambia) para que veas cómo son esos cursores y cómo se muestran.

Para aplicarlo sobre un evento, aquí tienes la lista de eventos:

http://www.elcodigo.com/tutoriales/j...vascript5.html

Tarzan · #5 (**permalink**) 08/02/2006, 12:15

Si.. dependiendo de la frase sobre la que se situe cambia a una forma u otra... pero las formas que adpata son las predeterminadas de windows... Flecha blanca.. Reloj de arena... mano.. Yo quiero que cambie a unas imágenes (.cur) que me he creado... Sólo me interesa el estado WAIT.. pero no quiero que cargue el reloj de arena..

¿Qué tipo de evento es el que debo modificar?

Gracias de nuevo.

ludovico2000 · #6 (**permalink**) 10/02/2006, 06:57

ops, pos no lo sé, no he logrado encontrar ningún evento asociado a wait en el que puedas meterle el cursor (es prácticamente lo mismo poner uno estándar que uno propio, aquí la guerra es cómo decirle cuándo lo tiene que hacer, por lo que veo...

)

CORE · #7 (**permalink**) 13/02/2006, 00:38

si no existe puedes agregar uno

a{cursor:url(wait.ico);}

saludos

Tarzan · #8 (**permalink**) 13/02/2006, 06:29

He agregado este código al css como me dijo CORE:

a{cursor:url(wait.ico);}

pero sirve para cambiar la imagen del cursor cuando se situa sobre un enlace..
Si pulso el enlace sigue apareciendo durante unos instantes el reloj y la flecha blancos...

Yo quiero cambiar la imagen del cursor SÓLO en el estado WAIT, es decir.. cuando el sistema muestra por defecto el reloj con la flecha...

Como decía ludovico2000 la guerra aquí es indicarle cuando cambiar.. hasta ahora he podido cambiar el cursor en 2 estados: el normal y el hover (situado sobre un enlace).. pero no he visto nada sobre modificar el WAIT..

Tal vez podría desactivar ese cambio, es decir, que el sistema no mostrara el reloj con la flecha cuando está pensando y siga con el cursor que tenía..

¿Alguien sabe como desactivar el cursor en un estado?

Gracias por todo.

1 saludo.

ludovico2000 · #9 (**permalink**) 13/02/2006, 11:51

¡¡¡¡lo Hice!!!!

Buscando, buscando por google, encontré un javascript que permite mostrar un mensaje mientras se carga la página, lo he modificado, y ahora tenemos esto:

una página que tiene por cursor el de "help" (será tu "wait") lo primero tiene un div que dice "cargando", y cuando la página ha terminado de cargarse (onload) oculta esa capa "cargando" y devuelve el cursor a "default"

El efecto es que mientras se carga la página, se muestra un mensaje (código encontrado) y se cambia el cursor (aportación ludovico2000)

Aquí está el código:

(puedes verlo funcionando en http://www.galeon.com/ludovico2000/test/cargando.htm)

Código:

<html>
<head>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">

<!-- PreLoad Wait - Script -->
<!-- This script and more from http://www.rainbow.arch.scriptmania.com 

function waitPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prepage').style.visibility='hidden';
document.body.style.cursor="default" //línea añadida por ludovico2000 para que tome el cursor "normal" cuando esté lista la página
}else{
if (document.layers){ //NS4
document.prepage.visibility = 'hidden';
document.body.style.cursor="default"//línea añadida por ludovico2000 para que tome el cursor "normal" cuando esté lista la página
}
else { //IE4
document.all.prepage.style.visibility = 'hidden';
document.body.style.cursor="default"//línea añadida por ludovico2000 para que tome el cursor "normal" cuando esté lista la página
}
}
}
// End -->
</SCRIPT>

<style>
BODY{cursor: help} //estilo añadido por ludovico2000 para que asigne en principio el cursor de "espera"
</style>

</head>

<BODY onLoad="waitPreloadPage();">


<DIV id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;"> 
<TABLE width=100%><TR><TD><B>Loading ... ... Please wait!</B></TD></TR></TABLE>
</DIV>
<iframe width="300px" height="300px" src="http://www.forosdelweb.com"><!--línea añadida por ludovico2000 para que la página tarde algo en cargar y se vea el efecto-->
</body>

Tarzan · #10 (**permalink**) 14/02/2006, 09:33

Hola Ludovico2000,

gracias por todo pero me temo que no consigo cambiar el cursor en el estado wait por mi icono personalizado... Puedo cambiarlo por otro que tenga Windows...

Según este código el cursor cambia de imagen mientras se carga la página pero no consigo que muestre mi "manoEnespera.cur"

donde debería añadir mi imagen para que la sustituya por el relojito?..

Gracias de nuevo por tu ayuda. 1 saludo.

ludovico2000 · #11 (**permalink**) 14/02/2006, 10:35

Prueba poniendo...

<style>
BODY{cursor:url(micursor.ico);} //estilo añadido por ludovico2000 para que asigne en principio el cursor de "espera"
</style>

Tarzan · #12 (**permalink**) 15/02/2006, 02:37

Si pongo:

BODY{cursor:url(micursor.ico);}

el cursor cambia si, pero en el estado normal, no en el estado wait.
Esa línea ya la tengo incluída en el CSS.

He estado investigando y en algunos tutoriales dicen que no hay solución.
Puedo intercambiar los estados de los cursores con los iconos predeterminados.. Y sólo utilizar un cursor personalizado en los estados Normal y Hover (sobre un enlace)... pero no hay forma de decirle que utilice un icono personalizado en el resto de estados, entre ellos el wait... Lo único que se me ocurre y esto sí puedo hacerlo, es cambiar el reloj de arena por el cursor de texto (es algo así: "I").. Es menos cutre..

Gracias por el esfuerzo y dedicación.

1 saludo.

ludovico2000 · #13 (**permalink**) 15/02/2006, 07:01

De hecho, con el código que te he puesto más arriba lo que haces no es ciertamente cambiar el cursor wait, sino obligarle a que primero cargue un cursor, luego continúe la carga de la página, y cuando esté terminada la carga de la página, vuelva al cursor normal que corresponda (default).

Esto, a la vista del usuario es cmabiar el cursor wait. Te vuelvo a remitir a http://www.galeon.com/ludovico2000/test/cargando.htm. Ahí verás que PARECE (y a ver quién dice que no es así sin saberlo) que mientras se carga la página el cursor es el de ayuda (como ejemplo).

Ahora, mi pregunta es ¿te refieres a otro "momento wait"? porque si lo que necesitas es "wait mientras se termina de cargar la página y aparecen todos los contenidos", ésta que te he propuesto es la solución... Considera que al pulsar un link, lo que estás haciendo es cargar otra página, con lo que sería el "wait mientras se carga" la nueva página...

furoya · #14 (**permalink**) 15/02/2006, 07:58

Hola todos :

Iba a poner tu misma pregunta, ludovico2000; hasta ahora no sabemos en qué caso de "wait" se tiene que cambiar. Habría que detectar o meterse en -si es generado por el documento- el hecho que cambia el cursor.

Si te sirve el código, Tarzan, pero no hay forma de cambiar por un cursor propio -raro, podría ser el archivo o la extensión- de última usas un crosshair y le agregas un efecto de " imagen que sigue al puntero " con tu puntero en *.jpg.

Tarzan · #15 (**permalink**) 15/02/2006, 12:40

Vale ludovicco2000, ahora te he entendido!!..

lo he probado y funciona casi perfecto..
Empieza con la imagen que le asigno y la mantiene hasta que carga la página, pero hay un instante en el que el navegador muestra la flechita blanca con el reloj... es sólo un instante.. no sé si tú lo has probado o si es cosa del explorer.. (No lo he probado en otro navegador)..

La instrucción:

<style>
BODY{cursor:url("MiWait.cur");}
</style>

hace que aparezca mi cursor de espera personalizado

y en la función waitpreloadpage he activado el otro cursor en la línea:
document.body.style.cursor="Normal.cur"

Y lo hace bien pero sigue apareciendo la flecha con el reloj durante un instante... pero no lo entiendo... se supone que la línea

<BODY onLoad="waitPreloadPage();">

debe asegurar que el cursor no cambie hasta que la página haya sido cargada por completo... Puede ser cosa del explorer?..

¿A ti no te pasa?

ludovico2000 · #16 (**permalink**) 15/02/2006, 12:49

Hombre, hay un primer momento en el que aún ni siquiera se ha cargado el <body...> y que por lo tanto aún aparece el relojito de marras... ni medio segundo... lo único que puedes hacer es "aligerar lo que hay antes del body", pero no creo que logres hacerlo absolutamente invisible.

Tarzan · #17 (**permalink**) 16/02/2006, 03:51

Si.. es poco tiempo pero no me gusta como queda.. Sabes si hay alguna forma de desactivar ese cambio?... sólo el estado wait... Es decir,

Inicio la página con miCursorNormal.cur,
Cuando sitúo el cursor sobre un enlace cambio a MicursorActivo.cur.

Hasta ahí bien, lo tengo implementado sin problemas.

Y cuando pulso sobre el enlace SIGO CON MiCursorActivo.cur, desactivando la opción WAIT y evitando que el navegador me muestre el jo@#$$o relojito..

¿Crees que se puede hacer eso?

ludovico2000 · #18 (**permalink**) 16/02/2006, 07:01

Se me ocurre que se podría poner una función que se llame onclick (o incluso onmousedown y/o onmouseup) en el propio link y que haga que el cursor se cambie a micursoractivo.cur, y al entrar en la "nueva" página vuelva a ser el default. Ahora no tengo tiempo de probarlo, lo siento, a lo mejor luego...

Tarzan · #19 (**permalink**) 16/02/2006, 09:18

Vale ludovico2000, no te preocupes, no hay prisa.
Mientras voy acabando otras cosas..

Aunque no he entendido muy bien tu idea.. el onMouseMove ya lo tengo implementado y cambia a MiCursorActivo.cur cuando situo el cursor sobre el enlace... luego, tras el click, carga la página (cambia a relojito) y finalmente con la página cargada ( MicursorNormal.cur)..

No sé a que te refieres con la función onclick en el link...

Cuando tengas tiempo.. gracias por todo.

1 saludo.

ludovico2000 · #20 (**permalink**) 17/02/2006, 05:39

Hay diferentes eventos, cada uno se refiere a una cosa distinta:

(obtenido de: http://www.elcodigo.com/tutoriales/j...vascript5.html)
onMouseMove: El usuario mueve el puntero
onMouseOver: El puntero entra en un área o imagen
onMouseDown: El usuario pulsa un botón del ratón
onClick: Se hace click en un objeto o formulario
onMouseUp: El usuario libera un botón del ratón
onMouseOut: El puntero no está sobre un área o enlace

Todos estos eventos ocurren cuando vas a un link, lo pinchas y sueltas para que se abra. El link normalmente se ejecuta onmouseup, que es cuando la página "va" a ese link y cuando se muestra el relojito, por lo tanto, será el que nos interese cambiar.

Mira a ver si esto te sirve:

www.galeon.com/ludovico2000/test/cargandob.htm

Código:

<html>
<head>
</head>
<script>
function relojalaporra(){
document.body.style.cursor="help";
};
</script>
<body onunload="relojalaporra()">


<a href="http://ludovico2000.galeon.com/test/cargando.htm" onmouseup="relojalaporra()">link</a>

</body>