HTMLpointHTMLpoint HTMLpoint.com


 Menú con botón derecho del ratón 2/2

  semana 55 - 21 febrero 2000

Una vez impostados los estilos del menú, pasamos a ocuparnos de las funciones showmenuie5, hidemenuie5, highlightie5 y lowlightie5.

Las dos primeras funciones muestran y esconden el menú al flujo del documento. Como hemos señalado anteriormente, este script es compatible exclusivamente con Msie5, y, por este motivo, no hay referencias a layer ni código crossbrowser para Netscape.

clientX e clientY hacen referencia a las coordenadas del cursor del ratón respecto al área client de la ventana. En particular, showmenuie5 muestra el menú, mientras que hidemenuie5 lo esconde al flujo de datos.

El color del texto y del fondo de las voces activas del menú quda definido por el código:


donde backgroundColor="blue" es el color de fondo de las voces activadas por el ratón, y .color="yellow" es el color del texto.

El color de los enlaces que se han tocado pero que ya no están activos queda definido por el código:


donde color="black" es el color de texto impostado.

La última función:

function jumptoie5(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url


permite al navegador llegar a la URL deseada con un clic del ratón en las voces del menú.

Las voces de menú deben insertarse dentro de la marca DIV:

<div id="ie5menu" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">

Dove:

  • el gestor de eventos onMouseover invoca la función "highlightie5()" cuando el ratón pasa por encima de las voces del menú
  • el gestor de eventos onMouseout invoca la función "lowlightie5()" cuando el ratón deja el área de enlace
  • el gestor de eventos onClick invoca la función "jumptoie5()" para llegar a la URL correspondiente con un clic del ratón.

    Cada voz del menú, dentro del cuerpo del documento, queda definida por el código:


    Para añadir nuevas voces de menú, no hay más que usar el copia/pega de las líneas de código ya presentes.

    Por último, hay que insertar en el documento el siguiente código, ya que sin él la demo no produce sus efectos:


    En última instancia, el script, además de ser útil, revela los progresos llevados a cabo por MsIe 5 por lo que se refiere a la gestión de los eventos dinámicos, así como la relativa facilidad de impostación de los mismos.


  •   Vuelve a principio de página