Duda con barras de menus desplegables

[hchiesa]

Tengo hecho un script para mostrar/ocultar capas (en realida son sub-menues desplegables) cuando hago click en un enlace. Mi problema es que quisiera que las capas aparecieran/desaparecieran cuando me posiciono sobre el enlace. Supongo que tengo que hacerlo con un evento mouseover/mouseout pero no se como hacerlo.
Agradeceria alguien me oriente al respecto.
Gracias.

[Bravenap]

Será mejor si pones una ejemplo del tu código sobre el que se pueda trabajar. Así no se trabaja, gustosamente, en balde.

[hchiesa]

OK, ahi va.

function DetectorNavegador() {
this.NS4 = document.layers;
this.IE4 = document.all;
this.DHTML = this.NS4 || this.IE4;
}

var soporta = new DetectorNavegador();

var menu = new Array();
var menuActivo = null;

function activarMenu() {
if (soporta.DHTML && menuActivo != this) {
if (menuActivo) menuActivo.ocultar();
menuActivo = this;
this.mostrar();
}
}

function mostrarMenu() {
eval(this.capaRefStr + this.estiloRefStr + '.visibility = "visible"');
}

function ocultarMenu() {
eval(this.capaRefStr + this.estiloRefStr + '.visibility = "hidden"');
}

function cambiarPosicionMenu(top, left) {
if (soporta.DHTML) {
eval(this.capaRefStr + this.estiloRefStr + this.topRefStr + ' = top');
eval(this.capaRefStr + this.estiloRefStr + this.leftRefStr + ' = left');
}
}

function ocultarMenuActivo(e) {
if (menuActivo) {
menuActivo.ocultar();
menuActivo = null;
}
}

function Menu(capaID, top, left) {
this.activar = activarMenu;
this.mostrar = mostrarMenu;
this.ocultar = ocultarMenu;
this.cambiarPosicion = cambiarPosicionMenu;
this.capaRefStr = (soporta.NS4) ?
'document["'+capaID+'"]' :
'document.all["'+capaID+'"]';
this.estiloRefStr = (soporta.NS4) ? '' : '.style';
this.topRefStr = (soporta.NS4) ? '.top' : '.pixelTop';
this.leftRefStr = (soporta.NS4) ? '.left' : '.pixelLeft';
this.cambiarPosicion(top, left);
}

//menu[i] = new Menu(idMenu, posY, posX)

menu[0] = new Menu("menu0", 20, 5);
menu[1] = new Menu("menu1", 20, 93);
menu[2] = new Menu("menu2", 20, 250);
menu[3] = new Menu("menu3", 40, 350);

[sci-fi]

hola,

la cuestión es que la manera de controlar los menúes con eventos es independiente del código que posteás... Por ejemplo, si querés cambiar el tipo de evento para llamar a la función de mostrar/ocultar, si lo hacés con javascript embebido en el HTML, en lugar de utilizar onClick (o directamente -puesto que se trata de un enlace, el que tiene un evento por "defecto" onclick, que es seguir el enlace-, utilizando un href="javascript: código") usás onMouseOver y onMouseOut:

<a href="javascript:"
onMouseOver="funcion_que_muestra_el_menu(cual_menu );"
onMouseOut="funcion_que_oculta_el_menu(cual_menu); ">

de lo contrario si accedés a los enlaces con los que querés disparar los menúes, podés registrar los eventos dentro de un script:

objeto_que_controla_menu.onmouseover = funcion_que_muestra_el_menu;

objeto_que_controla_menu.onmouseout = funcion_que_oculta_el_menu;

el código de arriba es literal; no hay que poner paréntesis después de "funcion_que_oculta_el_menu" etc, porque no queremos ejecutar la funcíón, sino registrar un evento hacia una función; por lo que ponemos solamente el nombre de la función, sin paréntesis. Esto se debe a la lógica del evento: un evento sucede cuando el usuario lo realiza, solamente entonces se ejecutará la función asignada... si agregamos () se ejecutará la función en el momento del parsing del script y no cuando suceda el evento... igualmente, "onmouseover" y "onmouseout" van así todo en minúsculas, de lo contrario arrojarán error (no van como convencionalmente en el HTML, "onMouseOut", etc)

espera que te sirva, y saludos

[hchiesa]

Gracias, sci-fi!!!!

Hace poco que empece con Javascript y el codigo que estoy usando lo copie de un tutorial sobre el tema (me sirvio mucho tu explicacion del parentesis () ya que con eso logre entender como funciona este script).
Ahora bien, todo me funciona sin problemas hasta el momento de ocultar los menues. El tema es que quiero que el menu desplegable desaparezca automaticamente cuando muevo el mouse afuera del menu hacia cualquier lugar de la pagina y eso no me funciona.

Paso a explicar como tengo armada la pagina. En mi documento tengo 2 eventos que ejecutan el script -con javascript embedio en HTML-:
1) Para mostrar el menu:
<a href=".." onMouseOver="menu[0].activar();">
(con este no tengo problemas)
2) Para ocultar automaticamente el menu como no puedo usar onMouseOut en ese mismo enlace (si hago eso no llegaria nunca a elegir una opcion del menu) intente usando onMouseOut/onMouseLeave en los tags de la capa (DIV y TABLE ya que tengo armado el menu en una tabla dentro de la capa) donde tengo el menu y no se porque esto no funciona.
<DIV id="menu0" onMouseOut="ocultarMenuActivo();">

Agradeceria que alguien me oriente ya que no logro entender porque no funciona.

Gracias.

[sci-fi]

hola,

si, la cuestión de los eventos para controlar los menúes es bastante problemática. el problema es éste:

1) si en el enlace no le ponés un onmouseout=ocultar el menu, qué pása si el menú está abajo o al costado? que por casualidad, si el usuario sale del enlace llevando el mouse hacia arriba (o algún otro lado) sin pasar el mouse por el menú, éste quedará visible...

2) cómo hacer que al ser llevado el mouse sobre el menú, al salir de él el menú vuelva a ocultarse...

hago así: Para el punto 2): agrego exactamente los eventos que agregué a los enlaces, pero a los menúes en sí. Es decir, te quedan cuatro eventos idénticos para cada menú (dos pares: out y over para los enlaces, lo mismo para los menúes). Esto funciona bien inclusive cross-browser. Tanto en MSIE como en Netscape/Mozilla.

para el punto 1), como dicho arriba, dejo el evento onmouseout para el enlace. Si el menú está bien posicionado, adyacente al enlace, no te pasa que el menú vuelve a ocultarse al salir del enlace. Por qué?, porque el menú tiene un evento onMouseOver="mostrar el menú". Quiere decir, que al salir el mouse del enlace, se activa el onMouseOut del enlace, pero al llegar el mouse al menú en solución de continuidad, se activa el evento onMouseOver del menú, quedando el menú visible, puesto que el menú está pegado (tiene que estar pegado, bien consecutivo al enlace).

Con respecto a la función para ocultar los menúes que no te funciona: eso tenés que verlo en cómo está armado en el script; o sea fijate en la ayuda del script o en la explicación del script, o investigalo. Por lo pronto, este código embebido en el HTML, en la tag del menu (DIV o SPAN), te puede ocultar el menú:

onMouseOut=" this.style.visibility = 'hidden'; "

saludos

[hchiesa]

Problema solucionado.


Muchisimas gracias, sci-fi!!!!