Navigation

[Klaus Bolwin]

Hallo!

Ich suche eine Javascript Lösung für einen Navigationsbaum. Mit onMouseOver soll ein Untermenü aufscheinen das verschiedene Links enthält die bei onMouseOver wiederum ein Untermenü aufscheinen lassen. Wer hat diesbezüglich ein brauchbares Gerüst.

Vielen Dank und Liebe Grüße aus Wien
Gerold

Zunächst der HTML-Teil, es handelt sich um einen Menue-(Haupt)link und ein div welches das Submenue enthält. alles ist wiederum in einem div enthalten:

<div id="m6" onmouseover="changeMenu(this,'block');" onmouseout="if (document.all)
       {if (!this.contains(event.toElement)) changeMenu(this,'none');}

else if (document.getElementById)
       {if (!containsNN6(this, event.relatedTarget)) changeMenu(this,'none');}">

<a class="menu" href="./kontakt.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
onmouseout="changeImg(this,'./pics/k1.gif')" title=""><img src="pics/k1.gif" alt="" />
Kontakt</a><br />

<div class="submenu">
      <a class="menu" href="./feedback.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title="Feedback-Formular"><img src="pics/k1.gif" alt="" />
      Kontaktformular</a><br />

<a class="menu" href="./gastb.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title="Zum Gästebuch"><img src="pics/k1.gif" alt="" />
      Gästebuch</a><br />

<a class="menu" href="mailto:[e-mail]" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title=""><img src="pics/k1.gif" alt="" />
      E-mail client</a><br />

</div></div>

Nun der Javascript Teil:

old = document.URL;

function changeImg(element,image)
{
if (element!=old) element.firstChild.src = image;
}

function containsNN6 (container, containee)
         {
         var isParent = false;
         do {
         if ((isParent = container == containee))
         break;
         containee = containee.parentNode;
         }
         while (containee != null);
         return isParent;
         }

function changeMenu(element,wert)
         {
         element.lastChild.style.display = wert;
         }