nicht angemeldet
Hallo,
ich bastle mit gerade ein Menu zusammen, das beim Anklicken ein Submenü aufklappt.
Dies mache ich bei Netscape durch Beschreiben der Eigenschaft "visibility". Soweit klappte alles wunderbar.
Als ich aber den aktuellen Menu-Eintrag mit "onmouseover" hervorheben wollte (bei Netscape), kamen die Probleme.
Ich habe um jeden Menu-Eintrag (SubMenu1, SubMenu2, ...)
ein "<div id="menu1Childx"></div>"
herumgebaut, um so die Hintergrundfarbe oder
die Schriftfarbe mit der Funktion "highlight()" über einen zusaetzlichen Layer ändern zu koennen. Auswirkungen bzw. Erfolg hatte dies aber überhaupt nicht. Alles war wie vorher.
Wenn ich aber die Farbzuweisung auf das übergeordnete Layer (menu1Child) mache anstatt auf (menu1Child1) funktioniert alles. Nur möchte ich eben nicht das gesamte Untermenü hervorheben sondern nur den einzelnen Menupunkt.
Liegt das Problem an meiner Funktion "highlight" oder ....
Für einen Tip wäre ich euch sehr dankbar. Gibt es vielleicht eine ganz andere (einfachere) Lösung für das Problem.
Ich hoffe ich habe alle nötigen Infos nachfolgend zusammen "geschnippelt". Eine URL, wo man sich das ganze anschauen kann, gibt es leider noch nicht.
Im Body hatte ich folgenden Aufbau:
<body onload="javascript:aufklappen('menu1')" bgcolor="#000000" text="#cccccc" link="#cccccc" vlink="#cccccc" alink="#cccccc">
<!-- *********** -->
<!-- M E N U 1 -->
<!-- *********** -->
<div id="menu1Parent" class="parent" style="padding-top:3;">
<a href="#" class="item" target="home" onclick="aufklappen('menu1')" onmouseover="window.status='';return true">
<img name="menu1Pic" src="menu-dateien/d_open.gif" border=0 width=12 height=12>Menu1</a>
</div>
<div id="menu1Child" class="child">
<div id="menu1Child1"><a class="item" href="#" target="home" onclick="test(this)" onmouseover="highlight('menu1Child1')">SubMenu 1</a></div>
<div id="menu1Child2"><a class="item" href="#" target="home" onclick="test(this)" onmouseover="highlight('menu1Child2')">SubMenu 2</a></div>
<div id="menu1Child3"><a class="item" href="#" target="home" onclick="test(this)" onmouseover="highlight('menu1Child3')">SubMenu 3</a></div>
<div id="menu1Child4"><a class="item" href="#" target="home" onclick="test(this)" onmouseover="highlight('menu1Child4')">SubMenu 4</a></div>
<div id="menu1Child5"><a class="item" href="#" target="home" onclick="test(this)" onmouseover="highlight('menu1Child5')">SubMenu 5</a></div>
</div>
...
...
Für die Darstellung der Menu-Eintraege habe ich diese Style-Sheets definiert:
<STYLE type='text/css'>
.parent { position:absolute; font-weight:bold; width:150; height:25; clip:rect(0 150 25 0); padding-top:3; padding-left:3; padding-bottom:3; }
.child { position:absolute; width:200; padding-left:20; padding-bottom:5; margin:5; visibility:hidden; }
</STYLE>
Für das Hervorheben des aktuellen Menu gibt es diese Funktion:
<script>
function highlight (LID)
{
if (document.layers)
{
var vari = document["menu1Child"].document[LID].document;
vari.bgColor = "red";
}
}
</script>