Pequeña ventana informativa con CSS + JS

15/04/2004 - 16:26 por Tximis | Informe spam
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 :-)
 

Leer las respuestas

#1 Miguel González
15/04/2004 - 18:37 | Informe spam
Hola Tximis!

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




"Tximis" escribió en el mensaje
news:

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 :-)

Preguntas similares