¿Como mostrar un "loading" al lado del puntero del mouse?

[oabareload]

¿Como mostrar un "loading" al lado del puntero del mouse?

Es simple, pero solo necesito saber como hacerlo... por favor... denme la mano. Gracias!!!

[demiurgo_daemon]

Hola,

para cambiar el ratón, sólo necesitas verificar los estados de la transacción AJAX:

Código:

//construccion del objeto xmlHttp
xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==2)//acabas de enviar tu peticion
	{
		document.body.style.cursor = "wait";
	}
	else if(xmlHttp.readyState==4)
	{
		document.body.style.cursor = "default";
		//transaccion terminada. puedes procesar los datos recibidos.
	}
}

También puedes definir una imagen PNG, JPG o GIF para un puntero propio, según las reglas CSS (pero cuidado con efectos inesperados en Explorer 6). Te recomiendo ampliamente usar una librería (como Prototype) en vez de este código, para mantener la incompatibilidad al mínimo, pero la idea es ésta.

saludos

[oabareload]

muchas gracias... igual he querido usar esa libreria pero desgraciadamente tengo que hacer yo mismo las funciones ya que son algo muy especiales. Entonces no quiero llenarme de código que no me es sencillo personalizar. Gracias, aunque lo que quería tal vez es mostrar un div al lado del puntero. En donde pudiera mostrar un cuadro con texto (información)

Seguire buscando...

[oabareload]

Actualmente tengo esta función, pero es solo para mostrar un mensajito cuando pasa sobre un "label":

(onmouseover=muestraAyuda(event,'Cargando');)

Solo que no logro mostrarlo correctamente... estoy usando la misma función pero no logro mandarle los parámetros correctos.

De hecho la llame así:

muestraAyuda(onmousemove,'Cargando');

Y medio funciono, ya que no se movía con el mouse y además mostraba error. Obvio no pude hacerla desaparecer.

Código HTML:

function colocaAyuda(event)
    {
        if(navegador==0)
            {
                var corX=window.event.clientX+document.documentElement.scrollLeft;
                var corY=window.event.clientY+document.documentElement.scrollTop;
            }
        else
            {
                var corX=event.clientX+window.scrollX;
                var corY=event.clientY+window.scrollY;
            }
        document.getElementById("mensajesAyuda").style.top=corY+20+"px";
        document.getElementById("mensajesAyuda").style.left=corX+15+"px";
    }

function ocultaAyuda()
    {
        document.getElementById("mensajesAyuda").style.display="none";
        if(navegador==0) 
            {
                document.detachEvent("onmousemove", colocaAyuda);
                document.detachEvent("onmouseout", ocultaAyuda);
            }
        else 
            {
                document.removeEventListener("mousemove", colocaAyuda, true);
                document.removeEventListener("mouseout", ocultaAyuda, true);
            }
    }

function muestraAyuda(event, titulo)
    {
        colocaAyuda(event);    
        if(navegador==0) 
            { 
                document.attachEvent("onmousemove", colocaAyuda); 
                document.attachEvent("onmouseout", ocultaAyuda); 
            }
        else 
            {
                document.addEventListener("mousemove", colocaAyuda, true);
                document.addEventListener("mouseout", ocultaAyuda, true);
            }
        ayuda=new Array();
        ayuda["Cargando"]="Espere por favor...";
        
        document.getElementById("ayudaTitulo").innerHTML=titulo;
        document.getElementById("ayudaTexto").innerHTML=ayuda[titulo];
        document.getElementById("mensajesAyuda").style.display="block";
    }