Cambiar el cursor del raton

[Tew]

He mirado las FAQs para cambiar el cursor del raton con este codigo:

cursor:url(puntero.cur);

coloco ese en el body, y en los div ke no kiero ke cambie pongo un cursor:default... y funciona muy bien pero en IE, en Firefox no funciona, no hace nada, siempre esta el cursor default.

¿Alguien puede ayudarme?


PD: Ademas una vez subido al host no funciona ni en IE, mientras ke en local (en mi PC) si funciona...

[JavierB]

Hola Tew

Yo tuve la misma duda y Jorolo me explicó la forma correcta de ponerlo:

cursor:url('puntero.cur'), help;

Saludos,

[Tew]

Iniciado por JavierB

Hola Tew

Yo tuve la misma duda y Jorolo me explicó la forma correcta de ponerlo:

cursor:url('puntero.cur'), help;

Saludos,

Gracias por la respuesta, pero asi solo consigo ke me muestre el puntero con una interrogacion al lado, y no el puntero personalizado. Esto en IE. (Supongo ke no influira ke sea animado .ANI)

En Firefox nada de nada...

PD: Ayer probe con comillas dobles y tampoco... y en local funciona en IE de cualkiera de esas maneras (con comillas, sin ellas, con comilla simples y el help....)

[Jorolo]

Hola a todos.

Por alusiones:
http://www.forosdelweb.com/f53/cambiar-puntero-283353/
y
http://www.forosdelweb.com/f53/puntero-seleccion-texto-362271/

[Tew]

Gracia. Veo ke con un .cur si funciona en FF pero con el cursor animado .ANI nanai... subidos al host voi a probarlo ahora, espero ke esta vez no den problemas.

Solo un par de preguntas:

- La primera es sobre añadir la palabra clave despues de la url, en los hilos ke me has pasado dices ke esta es una deficiencia mas de IE... yo la veo como una deficiencia de FF. Es como si al poner una imagen de fondo en body, despues de indicar la url tb tubiese ke poner un color... Siendo en ambos casos innecesario tanto la palabra clave como el color. Tu respuesta en ese hilo es ke si se pone una ruta a una imagen ke no existe tb funciona (.... y a mi no me rula con un puntero animado .ANI ). Pues mi opinion es esa, ke IE si lo hace bien en este caso, y en FF tendria ke hacer ke si el archivo no existe se use el puntero default.

- La segunda, a ke se puede deber ke funcione en local pero no subido en el hosting?


EDITO: En mi fichero de pruebas mu bien, pero en cuanto pongo el codigo en el fichero de mi pagina se j*de todo, ya no anda ni p'atras en el FF... entre esto y el PHP hoy voi a terminar hasta los mismisimos.

Ahn y no os lo perdais... subidos a internet no funcionan ni en IE ni en FF, ni en mi pagina ni en la pagina de pruebas...


NUEVA EDICION: Pues no va a resultar ahora ke depende del hosting ke se pueda o no cambiar el puntero... En 100WebSpace no funciona para ninguno, y en Lycos.es funiona para FF pero no para IE. Esto no es normal no??

Mas cachondo todavia, en Lycos cuando por alguna razon no se muestra el banner publicitario entonces el puntero si cambia para IE.

¡¡¡Esto es de locos!!!

[Jorolo]

Hola Tew.

Iniciado por Tew

Gracia. Veo ke con un .cur si funciona en FF pero con el cursor animado .ANI nanai... subidos al host voi a probarlo ahora, espero ke esta vez no den problemas.

¿Por qué debería FF dar soporte a ese estraño formato de archivos (ANI)?

Aquí surge una pregunta evidente ¿Por que IE solo acepta formatos estraños de archivos? ¿Por qué no acepta los formatos gráficos normales? (lease bmg, jpg, gif...) Yo no me lo explico.

Iniciado por Tew

Solo un par de preguntas:

- La primera es sobre añadir la palabra clave despues de la url, en los hilos ke me has pasado dices ke esta es una deficiencia mas de IE... yo la veo como una deficiencia de FF. Es como si al poner una imagen de fondo en body, despues de indicar la url tb tubiese ke poner un color... Siendo en ambos casos innecesario tanto la palabra clave como el color.

Que tú o yo opinemos si es necesario o no carece de relevancia, estas cosas las deciden personas que saben mucho más que tú o yo.
http://www.sidar.org/recur/desdi/tra...propdef-cursor

La que propuse es la forma estándar de hacerlo. No la de este o aquel navegador. Si no te gusta o no te funciona lo siento.

Iniciado por Tew

Tu respuesta en ese hilo es ke si se pone una ruta a una imagen ke no existe tb funciona (.... y a mi no me rula con un puntero animado .ANI ). Pues mi opinion es esa, ke IE si lo hace bien en este caso, y en FF tendria ke hacer ke si el archivo no existe se use el puntero default.

Pues debería hacerlo. Y yo afirme que lo hacía, aparentemente estaba equivocado (a veces pasa) lo siento si he podido inducir a error a alguien. Investigaré el tema y si es necesario reeditaré mis comentarios.

Es curioso, sin enlace funciona pero con un enlace erroneo no ¿?

Gracias amigo ... por abrirme los ojos.

[Tew]

Lo siento Jorolo pero no entiendo lo ke me kieres decir ya ke al leer tu respuesta me he llevado una impresion ke supongo ekivocada...

En fin. Veo en el enlace ke lo de poner varios valores es por si fallan los anteriores, siendo asi ya tiene mas logica (pero en mi opinion aun lo veo innecesario...), y seria lo mismo en el ejemplo ke te puse: si no se encontrara la imagen de fondo se usaria el siguiente parametro, en ese ejemplo un color (ke no se si se hace o se puede hacer).

<uri>
La aplicación del usuario recupera el cursor de un recurso señalado por el URI. Si la aplicación del usuario no puede manejar el primero de una lista de cursores, debe intentar manejar el segundo, etc. Si la aplicación del usuario no puede manejar ningún cursor definido por el usuario, debe usar el cursor genérico al final de la lista.

Ke los estandares los deciden personas ke sabens mas ke tu y yo? Pues seguramente, aunke no pondria la mano en el fuego

Bueno pero esto es un offtopic y lo dejo ya.

Lo de ke funcione en local en mi PC y no en el host me parece muy extraño, y mucho mas cuando he probado en otro hosting y se cambian las tornas... ¿Alguien sabe algo de esto ultimo?

[Jorolo]

Hola a todos.

En este tema dije que en FF la propiedad cursor funcionaba "de cine"
http://www.forosdelweb.com/showthread.php?t=283353

Lo cierto es que no funciona bien al 100% (creo). Por suerte Tew me señaló el problema y casualente encontré la solución.

El tema es el siguiente:

La propiedad cursor es a prueba de bombas, está diseñada de forma que puede funcionar siempre, hasta cuando falla.

Puedes indicar la imagen a mostrar o puedes indicar una lista de ellas, si la primera falla se intenta con la segunda...
Esta lista termina con una palabra clave, si todas la imágenes fallan la palabra clave indica el cursor a utilizar.

Por eso yo dije:

Supongo que no hace falta comentarlo, pero...
{cursor: url(), help;}
o
{cursor: url('imagen-inexistente.formato-desconocido'), help;}
También funcionan, por eso es obligatoria la palabra clave.

Pero resulta que:
{cursor: url('imagen-inexistente.formato-desconocido'), help;}

No funciona, ni la imagen (lógico) ni la palabra clave ( )


¿Solución?
{cursor: url(imagen-inexistente.formato-desconocido), url(), help;}

Este formato funciona siempre. (hasta que me contradigan).

[furoya]

Si bien Firefox no acepta aún cursores animados, hace ya algún tiempo hice un escript que permite ver un puntero en movimiento, y nunca lo publiqué; así que aprovecho el tema.

Código:

<html>
<head> <title>CURSOR GIRATORIO.</title>
<script>
var cur=new Array(8)
cur[0]="n-resize";
cur[1]="ne-resize";
cur[2]="e-resize";
cur[3]="se-resize";
cur[4]="s-resize";
cur[5]="sw-resize";
cur[6]="w-resize";
cur[7]="nw-resize";

var si=1;
var num=0;

function alfa(){
if(si==1){
si=0;
num+=1;
if(num==8){num=0};
document.body.style.cursor=cur[num];
setTimeout("si=1",200)}
}

function bravo(){
document.body.style.cursor="default";
}
</script>
</head>
<body>
<h2>El puntero rota al moverse sobre el cuadro rojo.</h2>
<center>
<div style="background-color:red; height:200px; width:200px" onmousemove="alfa()" onmouseout="bravo()">
</div>
</body>
</html>

Como particularidad, la animación se ve al mover el ratón. Y no sé cómo se comportará con un array de imágenes, pero si precarga bien no debería haber problemas.

[furoya]

Pues no; no los hay.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head> <title>CURSOR ANIMADO.</title>
<script>

var imagCur = new Array()
imagCur[0] = new Image();
imagCur[0].src="http://www.forosdelweb.com/images/smilies/biggrin.gif";
imagCur[1] = new Image();
imagCur[1].src="http://www.forosdelweb.com/images/smilies/smile.gif";
imagCur[2] = new Image();
imagCur[2].src = "http://www.forosdelweb.com/images/smilies/molesto.gif";
imagCur[3] = new Image();
imagCur[3].src = "http://www.forosdelweb.com/images/smilies/frown.gif";
imagCur[4] = new Image();
imagCur[4].src = "http://www.forosdelweb.com/images/smilies/enojado.gif";
imagCur[5] = new Image();
imagCur[5].src = imagCur[3].src;
imagCur[6] = new Image();
imagCur[6].src = imagCur[2].src;
imagCur[7] = new Image();
imagCur[7].src = imagCur[1].src;

var num=0;

function cursorAnimado0() {
document.getElementsByTagName( 'html' )[0].style.cursor = "url(" + imagCur[num].src + "), default;";

num = (num == 7) ? 0 : num+1;

setTimeout("cursorAnimado0()",500);
}

onload = cursorAnimado0;
</script>

<style type="text/css">
html {height:100%;}
body {background-color: black; color: white;}
</style>

</head>
<body>
<h2>El puntero tiene una animaci&oacute;n "cuadro a cuadro" 
armado con una serie de im&aacute;genes.</h2>

<p>S&oacute;lo para Firefox.</p>

<a href="#">enlace.</a>

</body>
</html>

[buzu]

pues aun que dices que es para FF a mi no me funciona... copio ypego el codigo y no funciona en FF. Personalmente no pondria un cursor personalizado pero me dio curiosidad.

[furoya]

Le agregué el dtd. Pero no era eso, funcionaba igual, ya lo probé.

¿Qué no te anda? ¿La animación o ni siquiera vez las imágenes? ¿Estás conectado?

Yo lo estoy viendo en un

Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

puede que en versiones anteriores no ande.

[buzu]

no, no me anda... yo uso un FF2.0.0.11 Mozila 5.0 en MAC... y no, no veo nada mas que el cursor normal.

[furoya]

Estaba por darte una lista de pruebas a hacer en el documento y descubrir así en dónde está el problema, porque como estamos en CSS no tienes obligación de entender el escript. Pero resulta que eres programador, así que ya debes haberlas hecho todas.

Lo estoy viendo en un WinXP / PC. Ése debe ser el asunto. Quizá aún no está implementado para Mac.

Supongo que yo tampoco pondría un puntero animado y personalizado, pero hay diseñadores que sí, y no quiero que digan "en FF no lo pongo porque no hay manera". Ahora me voy a tener que preocupar porque no se ve en las Mac.

P.D. : ¿La animación anterior tampoco anda?

[buzu]

La unioca forma en la que he visto eso alguna vez en Mac es cuando usan flash. Pero insisto se me hace una mala idea. La unica vez que lo hice fue para poner una especie de glow al rededor del puntero en una web hehcha en flash perotuve que crear los diferentes estados del mouse, la flecha, la manita,... Trate de hacerlos iguales por lo que los hice pixel por pixel y tuve el cuidado de que funcionara igual que el cursor normal. Los usuarios estan acostumbrados a eso y es lo que les gusta. Todos saben que cuando el cursor se comvierte en manita indica que puedes hacer click en esa area y cuando eso no pasa muchos usuarios se confunden.

[furoya]

¡Pero sííí!, hay tantos mensajes con eso de hacer páginas accesibles para discapacitados y nadie se preocupa por el efecto que le causa a un neurótico obsesivo que le cambien "su" puntero. A mi me enferma, y recién lo acepto si le encuentro alguna justificación. Si no, elevo una plegaria al cielo por la madre del diseñador, y sigo. (¿Qué otra me queda?).

Me hiciste acordar de un par de temas. Ya no tienen nada que ver con éste de Tew, pero como se lo resolvimos no creo que se enoje. (Le andará en el host?. También lo querrá para Mac?)

A pesar de que no comparto la idea de andar cambiando elementos y formatos "críticos" del navegador desde el documento, esto debe ocurrir porque no soy diseñador, y a ellos sí los entiendo. El problema es cuando se abusan, y en vez de ser creativos u originales, son circenses, petardistas y a veces kich.
Mi postura es que el navegador tiene que permitir los cambios, y debemos ser nosotros quienes no los usemos. Por supuesto, también habrá que empezar una campaña explicando cómo y cuándo si cambiamos un formato que fue configurado por el usuario, estamos invadiendo sus preferencias o, simplemente cambiamos un diseño para que se entienda mejor nuestra página.

Hace unos meses empecé una discusión así en medio de un tema, pero como el nivel general del foro estaba muy por debajo de la media histórica, allí mismo pedí que no se continuara para que no me escribieran cualquier cosa. Igual, me lo ignoraron olimpicamente; si no pedía nada, era lo mismo.
No era sobre punteros, sino sobre colores del sistema o del theme : IE, a pesar de su política en general, no permite cambiar los configurados por el usuario para elementos deshabilitados; y FF sí.

Siempre que puedo, recomiendo no "inventar" nuevos métodos para hacer cosas viejas y ya conocidas, pero algunas personas se meten a hacer páginas sin siquiera saber usarlas desde antes. Es ahí cuando quieren inventar lo que está inventado, y lo hacen mal.

Una vez preguntaron -y de bastante mala manera- cómo se podía hacer un select múltiple que permitiera seleccionar varios option sólo con click.
Por supuesto que eso se hace con [SHIFT] y [CTRL], pero o no lo sabía o quiso ser novedoso, y complicarle la vida a los navegantes.
Lo peor es que le respondieron.
No, todavía peor, le respondimos .

Volviendo a los punteros, ¿qué extensión usan en Mac?. En IE / Windows andan las *.cur, *.ani, *.ico... En Firefox (sí, sobre Windows) *.cur y también formatos de imagen. Quizá haya que investigar si existe alguno común a todos los sistemas y usar ése. Se me ocurre. Si es que ya no lo probaste.

[furoya]

En Iceweasel también funciona; así como está, sin cambiar los *.gif por *.cur.

Con el que tuve problemas es con el código anterior, el del cuadro rojo. Resulta que la animación debe aparecer solamente cuando movemos el puntero, pero un par de veces me siguió girando aún cuando solté el ratón. Me pasaba en IE y FF, así que debe ser algún cuelgue del XP o de la versión de javascript que tiene instalada.

[furoya]

Volví sobre el asunto con el siguiente razonamiento : a pesar de que no me parece que deba usarse un puntero que no sea el de nuestro sistema, sigue siendo una opción para los desarrolladores el poner uno personalizado y hasta animado. Y en estos foros hicimos tantas cosas raras, que no nos vamos a privar ahora de ésta, aunque sea por el honor.

Si los navegadores no aceptan páginas con punteros *.ani (por cuestiones de seguridad, y no porque sean "formatos extraños") entonces la única opción sería pulir este efecto hasta que funcione. Como ya se dijo, también existe 'flash', pero si no usamos un cursor animado, menos deberíamos usar flash.

Internet Explorer sí reconoce los *ani, aunque sólo desde una carpeta local (nunca desde un servidor web) Esto es porque el Windows Explorer usa mucho del Internet Explorer y viceversa; y las ayudas también, y algunas aplicaciones como las *hta.
Así que seguimos como al principio

Hice este nuevo ejemplo con imágenes *cur que se ven en Windows, dejé los nombres de los archivos para que cada uno lo cambie por los suyos y pruebe en distintos S.O. .

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head> <title>CURSOR ANIMADO(*.cur).</title>
<script type="text/javascript">

var imagCur = new Array()
imagCur[0] = new Image();
imagCur[0].src="flecha0.cur";
imagCur[1] = new Image();
imagCur[1].src="flecha1.cur";
imagCur[2] = new Image();
imagCur[2].src = "flecha2.cur";

var num=0;

function cursorAnimado0() {
document.getElementsByTagName( 'html' )[0].style.cursor = "url(" + imagCur[num].src + "), help";

num = (num == imagCur.length-1) ? 0 : num+1;

setTimeout("cursorAnimado0()",200);
}

onload = cursorAnimado0;
</script>

<style type="text/css">
html {height:100%;}
body {background-color: black; color: white; 
}
</style>

</head>
<body>
<h2>El puntero tiene una animaci&oacute;n "cuadro a cuadro" 
armado con una secuencia de punteros *.cur.</h2>

<p>IExplorer; Firefox; Chrome; Safari (cambia cuando se mueve). Probados en Windows</p>

<a href="#">enlace.</a><br>

<input type="text"><br>

<input type=button value="Prueba puntero 0" style="cursor: url(flecha0.cur), help" onclick="alert(this.style.cursor)"><br>
<input type=button value="Prueba puntero 1" style="cursor: url(flecha1.cur), help" onclick="alert(this.style.cursor)"><br>
<input type=button value="Prueba puntero 2" style="cursor: url(flecha2.cur), help" onclick="alert(this.style.cursor)"><br>

</body>
</html>

Usé para probarlo punteros locales, porque no tenía donde colgarlos de internet y entonces me asaltó la duda : ¿todavía se puede llamar a un cursor 'externo' en una página web? Hace muchísimo que no me encuentro con uno al navegar Y si las nuevas versiones ya no los aceptan, entonces estoy perdiendo el tiempo Y se los hago perder a ustedes.

Caso contrario, hago un par de observaciones.
Usé el IconFX para crear unos punteros. No estoy seguro si los hice bien, se supone que sus archivos sirven para cursores, pero algunos se ven en un navegador y no en otro, o se ven distintos en posición y/o tamaño. no encontré un editor gratis de *.cur, si conocen uno que no pese megas y megas lo bajo y pruebo de nuevo.
Otra curiosidad es que la animación debería ser continua, pero en Safari se mueve cuando lo hace el puntero. Y en el ejemplo del mensaje #9 —que debería seguir el movimiento del cursor— en Safari tiene animación continua .
Y bue, peor es Opera, que no los muestra de ninguna manera.

[furoya]

Aprovecho que puse un enlace a éste en otro tema, y le doy otra vuelta de tuerca al asunto, basado en mi provervial testarudez.

Resulta que el sitio imayiyak no acepta que le suba ni punteros *.cur ni *.gif animados. Así que todo lo que estaba armando para actualizar el tema lo tuve que resolver prescindiendo de su servicio.

Metí todo en un comprimido y lo subí a megaplod.


http://www.megaupload.com/?d=YRZGYTUB

Nombre del archivo: cursorAnimado.rar
Descripción del archivo: ejemplos de cursor animado para "Cambiar el cursor del raton" en Foros del Web
Tamaño del archivo: 34.65 KB


Lo que sí pude actualizar es ese ejemplo que buzu decía que no andaba. Ahora lo probé en una versión más nueva de Firefox, y tampoco me anda.

Pero en Chrome, sí. Así que el truco es basicamente para FF.

Como era con imágenes, en vez de seguir sacando las de este Foro, aprovecho que a las *.png si las puedo colgar de la web y dejo la actualización también acá.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head> <title>CURSOR ANIMADO.</title>
<script>

var imagCur = new Array()
imagCur[0] = new Image();

imagCur[0].src = "http://img842.imageshack.us/img842/8786/punterocohete0.png";
imagCur[1] = new Image();
imagCur[1].src = "http://img708.imageshack.us/img708/4721/punterocohete1.png";
imagCur[2] = new Image();
imagCur[2].src = "http://img841.imageshack.us/img841/3111/punterocohete2.png";
imagCur[3] = new Image();
imagCur[3].src = "http://img708.imageshack.us/img708/3007/punterocohete3.png";
imagCur[4] = new Image();
imagCur[4].src = imagCur[2].src;
imagCur[5] = new Image();
imagCur[5].src = imagCur[1].src;

var num = 0;

function cursorAnimado0() {
document.getElementsByTagName('html')[0].style.cursor = 
"url(" + imagCur[num].src + "), help";

num = (num == 5) ? 0 : num+1;

setTimeout(cursorAnimado0, 120);
}

onload = cursorAnimado0;
</script>

<style type="text/css">
html {height: 100%; }
body {background-color: black; color: yellow; font-size: 18px; }
div {height: 100px; width: 300px; background-color: red; color: navy; 
padding: 15px; cursor: url("http://static.forosdelweb.com/fdwtheme/images/smilies/porra.gif") , wait; 
font-weight: bold; }
a {background-color: white; }
</style>

</head>
<body>
<h2>El puntero tiene una animaci&oacute;n "cuadro a cuadro" 
armado con una serie de im&aacute;genes.</h2>

<p>S&oacute;lo para Firefox y Chrome.</p>

<p>Im&aacute;genes : 

<img src="http://img842.imageshack.us/img842/8786/punterocohete0.png" align=middle> ; 
<img src="http://img708.imageshack.us/img708/4721/punterocohete1.png" align=middle> ; 
<img src="http://img841.imageshack.us/img841/3111/punterocohete2.png" align=middle> ;
<img src="http://img708.imageshack.us/img708/3007/punterocohete3.png" align=middle> ( 
<i>punteroCohete0.png</i>; 
<i>punteroCohete1.png</i>; 
<i>punteroCohete2.png</i>;
<i>punteroCohete3.png</i>. )

<div> Aqu&iacute; un cursor animado hecho con <br>
<center><img src="http://static.forosdelweb.com/fdwtheme/images/smilies/porra.gif"> <br>
<i>porra.gif</i> . </center>
</div></p>

<p><input type="text" value="EDITABLE"><br>

<a href=
"http://www.forosdelweb.com/f53/cambiar-cursor-del-raton-364551/">
Cambiar el cursor del raton</a> (<b>Foros del Web</b>)<br></p>

</body>
</html> 

Como verán, Chrome también acepta *.gif animados de cualquier tamaño (o casi), pero a éste sí lo saqué de FdW, el original lo van a tener que buscar en el comprimido, porque imeiyiyak no me lo deja subir.

Está probado en forma local, aunque como en el tema

poner una imagen al cursor

ya emprear mostró que todavía se puede usar un puntero personalizado en CSS, entonces supongo que todo este engendro deberá andar también colgado en la web.

Las imágenes que no son punteros reales no andan en IE, y el cursor personalizado en general, no anda en Opera.

Imágenes :


◙ ◙ ◙ ◙