Pequeña ventana informativa con CSS + JS

Buenas, estoy desarrollando un formulario en el que a la hora de
rellenarlo pueden surgir dudas, para ayudar al usuario en este proceso
se le muestran unas pequeñas ventanas de ayuda. Hasta aqui todo bien,
mas o menos lo he conseguido, a base de CSS y JavaScript.

En los enlaces pongo algo del estilo:

<a href="#" onMouseOver="ayuda_on();" onMouseOut="ayuda_off();">*</a>

De modo que cuando el usuario pasa el puntero sobre el enlace, en
este caso es un asterisco (*), se ejecuta la funcion ayuda_on(); y
cuando deja de estar el puntero sobre el asterisco, se ejecuta la
funcion ayuda_off();

La funcion ayuda_on() lo que hace es mostrar la ventana de ayuda, y
ayuda_off() la oculta, para ello lo que hago es jugar con la
propiedad "visibility", cambiandola de "visible" a "hidden" y
viceversa. Pongo aqui el contenido de las dos funciones:

function ayuda_on() {
document.all.ayuda.style.visibility ="visible";
document.all.ayuda.style.pixelTop = window.event.y ;
document.all.ayuda.style.pixelLeft = window.event.x ;
}

function ayuda_off() {
document.all.ayuda.style.visibility="hidden";
}

"ayuda" es un elemento DIV que lo tengo definido en una hoja CSS
aparte, el contenido es el siguiente:

DIV#ayuda {
position: absolute;
z-index: 5;
visibility: hidden;
}

Y el invento funciona mas o menos "bien" salvo algunas pegas. No
tengo mucha idea de JS, lo que quiero es que la ventana de ayuda salga
cerca del puntero, para ello a la ventana le asigno las coordenas
"window.event.y" y "window.event.x", ¿Estas coodenadas son las del
puntero del raton? Es que a veces aparece la ventana al lado del
puntero, pero muchas otras veces no..

La otra duda es que quiero que aparezca la ventana por encima de
todo, es decir que tenga el z-index mayor. Pero no funciona tampoco
siempre, hay veces se queda por detras de algun elemento del
formulario, ¿Que podria hacer? Aunque me hace pensar que esto puede
ser algun fallo del IE..

Haber si alguien puede echarme una mano, o pasar alguna pagina
donde este implementado esto, o algun enlace que explique como
hacerlo.

Un saludo y muchas gracias :-)

Un par de cosas. De un lado, el código que utilizas está pensado sólo
para el IE (por el uso de "document.all" y la gestión de eventos. Por
otro, hay cosas que no tienen solución, como el hecho que los
"<select>" no se ubiquen tal como quisieramos en las capas "z-index"
(aparentamente es algo intrínseco al control).

No se qué tipo de ayuda quieres mostrar, pero si es texto
relativamente corto lo más práctico es usar el atributo "title". Por
ejemplo, con cursor de ayuda y todo, quedaría así de sencillo:

<span title="Aquí el texto de ayuda..." style="cursor: help">*</span>

Si la ayuda es más compleja y larga, yo me plantearía abrir una
ventana específica que la contenga haciendo "click" sobre algun enlace
(así, es el usuario quién decide si quiere descargar la ayuda,
ahorrando llenarle la página de datos que no utiliza).

Saludos!
Miguel

No tengo mucha idea de JavaScript, lo "document.all" lo saque de
algun
otro script, desconocia que no fuera estandar.. ¿Cual es la solucion
para utilizar metodos estandar?

> Un par de cosas. De un lado, el código que utilizas está pensado sólo
> para el IE (por el uso de "document.all" y la gestión de eventos. Por
> otro, hay cosas que no tienen solución, como el hecho que los
> "<select>" no se ubiquen tal como quisieramos en las capas "z-index"
> (aparentamente es algo intrínseco al control).

No tengo mucha idea de JavaScript, lo "document.all" lo saque de algun
otro script, desconocia que no fuera estandar.. ¿Cual es la solucion para
utilizar metodos estandar?

>
> No se qué tipo de ayuda quieres mostrar, pero si es texto
> relativamente corto lo más práctico es usar el atributo "title". Por
> ejemplo, con cursor de ayuda y todo, quedaría así de sencillo:
>
> <span title="Aquí el texto de ayuda..." style="cursor: help">*</span>

Ya habia pensado en esta solucion, pero no me convence mucho. Queria
algo mas original. Voy a investigar sobre esto. Es mas o menos lo que
quiero, que salga una ventanita al lado del cursor, pero en este caso
saldria un cuadro horizontal con la frase...

> Si la ayuda es más compleja y larga, yo me plantearía abrir una
> ventana específica que la contenga haciendo "click" sobre algun enlace
> (así, es el usuario quién decide si quiere descargar la ayuda,
> ahorrando llenarle la página de datos que no utiliza).

La ayuda no es extensa, apenas un par de lineas, no cargan mucho la
pagina. Esto no es un problema creo yo.


> Saludos!
> Miguel


Gracias Miguel por lo comentarios, un saludo! :)