Ich habe eine Tabelle als Navigationsleiste erstellt:
Das ist eine sehr schlechte Idee. Auf Tabellen als Layoutmittel solltest und kannst du verzichten. Sonst kommt gerne überladener und unwartbarer HTML-Code heraus, wie du ihn geschrieben hast.
Ich vermute, diese Aufgabe lässt sich viel einfacher mit CSS-basierten Navigationsleisten umsetzen.
<tr height="24"><td ID="Abstand" style="border-bottom: 3pt #ffffff solid; colspan:2"> </td><td></td></tr>
Abstände löst du mit CSS, nicht mit überflüssigen und inhaltslosen HTML-Elementen. Formatierungen solltest du zentral im Stylesheet vornehmen.
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='aktuellPrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Aktuelles</td><td> </td><td> </td></tr>
Warum so umständlich? Wozu brauchst du die beiden leeren Spalten? Geht es da nur um den visuellen Effekt?
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='InternetAbfragePrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Interessante Links<br>und Suchabfragen</td><td> </td></tr>
Du kannst eine ID im Dokument nur einmal verwenden. Wenn du alle td-Elemente formatieren willst, schreibst du ins CSS eine Regel #Navigation td {...}
{top.Frame1.document.getElementsByName('Bereiche')[i].className = 'offen'};
Warum diese Schreibweise mit den geschweiften Klammern um jeden Befehl? Das ist unnötig und bedeutet etwas anderes.
Aus Sicht eines iframes, das im Dokument mit der Navigation liegt, brauchst du übrigens nur top zu notieren, um auf das entsprechende window-Objekt zu kommen.
Du suchst hier nach Elementen mit dem Namen »Bereiche«. Derartige Elemente gibt es in deinem Quellcode nicht. Du suchst vielmehr nach Elementen mit der Klasse »bereich«, oder? Jetzt könntest du natürlich eine Art »getElementsByClassName« nutzen, aber das gibt es nur in einigen Browsern und du müsstest in anderen eine Helferfunktion verwenden.
Vermutlich soll man im iframe zwischen Seiten wechseln können, sodass diese von sich aus die Navigation aktualisieren müssen. Das wird etwas schwieriger. Am besten gibst du jedem Menüpunkt eine eindeutige ID. Aus den iframe-Dokumenten heraus machst du dann:
updateNavigation("aktuelles"); // Aufruf unterscheidet sich von Dokument zu Dokument
function updateNavigation (id) {
var el = parent.document.getElementById(id);
el.className = "offen";
el.colSpan = 2;
}
Das Überschreiben von onmouseover und onmouseout wird noch schwieriger, weil du sie nicht einfach nur löschen willst, sondern beim Wechsel des aktiven Menüpunktes vermutlich auch wiederherstellen willst. Daher würde ich den Klassenwechsel ganz anders lösen. Am besten ganz darauf verzichten, indem du auf ul, li und a zur Auszeichnung deiner Navigation umstellst. Dann kannst du browserübergreifend Styles für a:hover vergeben und sparst dir den Klassenwechsel.
Ansonsten würde ich einen Event-Handler beim übergeordneten Element vergeben, der alle Mouseover-Ereignisse innerhalb der Tabelle behandelt. Der sucht sich das zugehörige tr-Elemente und gibt ihm eine ID »aktiv«. Das Element, das vorher die ID hatte, wurde zwischengespeichert und ihm wird die ID nun weggenommen. Im CSS kannst du dann diese ID formatieren und eine Ausnahmeregel für den aufgeklappten Menüpunkt notieren.
Mathias