Christoph Schnauß: "display:none" und "display:block" per Mausklick tauschen

Beitrag lesen

hallo Forum,

Ich baue grade zur eigenen Belehrung an einer Konstruktion, in der ich zwei absolut an derselben Stelle positionierte Elemente (DIV's) gegeneinander austauschen möchte. Eins ist per "display:block" im Startzustand der Seite sichtbar, das andere ist wegen "display:none" unsichtbar. Und ich möchte mit einem link - kann eine Wechselgrafik sein - erreichen, daß die beiden Zustände ausgetauscht werden.
Das kriege ich hin, wenn ich meinen DIV's Namen gebe und dann mit
  onClick="document.getElementById('name1').style.display='block'; document.getElementById('name2').style.display='none'"
arbeite. Aber ich würde gerne den EventHandler weglassen und ganz auf Javascript verzichten. Als "Testbrowser" benutze ich zur Zeit Opera, weil ich da am leichtesten Javascript an- und ausschalten kann. Und Javascript soll es auf der Seite letzten Endes nicht geben, nur diesen EventHandler werde ich einfach nicht los bzw. finde nicht heraus, wie ich den "Zustandswechsel" der beiden DIV's auch ohne Javascript realisieren kann.

Es gibt einen in den "Tipps&Tricks" vorgestellten Trick, dazu das "hover"-Attribut des a-tags auszunutzen, das funktioniert aber nur, solange sich die Maus auf dem entsprechenden a-tag aufhält und ist mir etwas zu "tricky" ("hover" funktioniert auch mit einigen anderen tags, die Voraussetzung, daß die Maus drauf stehenbleiben muß, ist aber dieselbe).

Weiß jemand eine Lösung, wie ich einen solchen "Zustandswechsel" ganz ohne EventHandler und Javascript realisieren kann? Alle Lösungsvorschläge, die es ja in größerer Menge im Archiv gibt, setzen auf DHTML inclusive Javascript ...

Grüße aus Berlin

Christoph S.