nicht angemeldet
"display:none" und "display:block" per Mausklick tauschen
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.
-
Hi Christoph,
ich hab mir das auch schon mal ueberlegt. Ich hab's zwar nie getestet, koennte mir aber vorstellen, dass man anstatt a:hover a:active 'missbrauchen' koennte.
Dieter
-
hi,
Ich hab's zwar nie getestet, koennte mir aber vorstellen, dass man anstatt a:hover a:active 'missbrauchen' koennte.
Das hab ich probiert, und das funktioniert leider nicht (bei mir).
Christoph S.
-
Hallo,
Ich hab's zwar nie getestet, koennte mir aber vorstellen, dass man anstatt a:hover a:active 'missbrauchen' koennte.
Das hab ich probiert, und das funktioniert leider nicht (bei mir).Naja, ganz dauerhaft geht's nicht.
<html>
<head>
<title></title>
<style type="text/css">
<!--
a span#b1 {display:block; width:150px; height:150px; position:absolute; top:75px; left:75px; border:1px solid black; background-color:#FFFF00; z-index:2;}
a span#b2 {display:none; width:100px; height:100px; position:absolute; top:100px; left:100px; border:1px solid black; background-color:#FF0000; z-index:1;}
a:active {font-weight:bold;}
a:active span#b1 {display:none; z-index:1;}
a:active span#b2 {display:block; z-index:2;}
a:focus {font-weight:bold;}
a:focus span#b1 {display:none; z-index:1;}
a:focus span#b2 {display:block; z-index:2;}
-->
</style>
</head>
<body>
<p><a href="#"><span id="b1">Bereich 1</span><span id="b2">Bereich 2</span>klick</a></p>
</body>
</html>Bei Focus-Verlust des Links wird Bereich 1 wieder sichtbar. MSIE5.x entfernt außerdem Hintergrund und Rahmen nicht. Wenn beide Bereiche gleich groß sind, sieht man das aber nicht.
Dauerhaft wäre es mit :visited. Aber dann wahrscheinlich zu dauerhaft ;-)), nämlich solange, bis die Seite aus dem Browser-Cache genommen wird.
viele Grüße
Axel
-
hallo Axel,
[Testcode]
Interessanter Vorschlag, probiere ich mal durch.
Dauerhaft wäre es mit :visited. Aber dann wahrscheinlich zu dauerhaft ;-)), nämlich solange, bis die Seite aus dem Browser-Cache genommen wird.
Wie weit läßt sich das beispielsweise mit
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
beeinflussen?Christoph S.
-
-
-
Hi,
ich hab mir das auch schon mal ueberlegt. Ich hab's zwar nie getestet, koennte mir aber vorstellen, dass man anstatt a:hover a:active 'missbrauchen' koennte.
a:active gilt nur während des Klicks (also vom Runterdrücken der Maustaste bis zum Loslassen.
Kann es sein, daß Du a:focus meintest?Zur Ausgangsfrage:
meines Erachtens ist eine solche dauerhafte Zustandsänderung ohne Javascript nicht möglich.
Es sei denn, man baut eine zweite, fast identische Seite (nur die display-Eigenschaften der beiden divs sind vertauscht),
und wechselt beim Klick über das href-Attribut...cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
hallo Andreas,
a:active gilt nur während des Klicks (also vom Runterdrücken der Maustaste bis zum Loslassen.
Richtig, allerdings würde es weiter gelten, wenn der "Klickeffekt" in einem anderen Frame ausgelöst und der Focus auf diesen anderen Frame gesetzt wird. Kommt als Aufgabenstellung nicht in Frage.
meines Erachtens ist eine solche dauerhafte Zustandsänderung ohne Javascript nicht möglich. Es sei denn, man baut eine zweite, fast identische Seite (nur die display-Eigenschaften der beiden divs sind vertauscht), und wechselt beim Klick über das href-Attribut...
Das funktioniert, aber auch das wollte ich halt wegen des kurzen "Flackerns" des Bildschirms gerne vermeiden.
Selbstverständlich könnte man auch auf irgendeine serverseitige Lösung ausweichen. Aber auch das entspricht nicht meiner Aufgabenstellung: im Endeffekt soll auf der ganzen Seite nichts andres stehen als CSS und HTML. Daß das schwierig einzulösen ist, weiß ich, daß es unmöglich sein soll, weigere ich mich noch, anzunehmen.
Christoph S.
-
Hi,
a:active gilt nur während des Klicks (also vom Runterdrücken der Maustaste bis zum Loslassen.
Richtig, allerdings würde es weiter gelten, wenn der "Klickeffekt" in einem anderen Frame ausgelöst und der Focus auf diesen anderen Frame gesetzt wird. Kommt als Aufgabenstellung nicht in Frage.Nein.
Nur weil der IE das falsch interpretiert und die Regeln, die bei :active angegeben wurden, auch bei :focus noch anwendet (und dafür :focus komplett ignoriert), ist das nicht richtig. Es gibt Browser, die das richtig machen (Mozilla z.B.)
Siehe auch http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes, wo es heißt:
- The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
- The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).Da steht nichts davon, daß das von Frames oder irgend was anderem abhängt.
Du schreibst ja selbst im zweiten Teil Deines Satzes von "Focus", aber der hat wenig mit :active zu tun.Selbstverständlich könnte man auch auf irgendeine serverseitige Lösung ausweichen. Aber auch das entspricht nicht meiner Aufgabenstellung: im Endeffekt soll auf der ganzen Seite nichts andres stehen als CSS und HTML. Daß das schwierig einzulösen ist, weiß ich, daß es unmöglich sein soll, weigere ich mich noch, anzunehmen.
Du willst eine über einen Hover-, Activ(at)e- oder Focus-Effekt hinausgehende Zustandsänderung durchführen.
Welcher Teil von HTML oder CSS erlaubt eine solche dauerhafte Zustandsänderung?
Ich kenne keinen. Und ich meine, daß ich HTML und CSS ganz gut kenne...cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
rehi,
Nur weil der IE das falsch interpretiert und die Regeln, die bei :active angegeben wurden, auch bei :focus noch anwendet (und dafür :focus komplett ignoriert), ist das nicht richtig. Es gibt Browser, die das richtig machen (Mozilla z.B.)
<seufz>
So weit bin ich schon. Es gibt ein paar nette Sachen, die bei mir auf der Platte liegen und mit mozilla, galeon, Konqueror (und teilweise Opera) ganz gut funktionieren. Die "Barriere" bildet der IE, wenn ich so etwas hochladen möchte, weil ich damit rechnen muß, daß mein "Besucher" mit hoher Wahrscheilnichkeit den IE einsetzt
</seufz>Da steht nichts davon, daß das von Frames oder irgend was anderem abhängt. Du schreibst ja selbst im zweiten Teil Deines Satzes von "Focus", aber der hat wenig mit :active zu tun.
Richtig, ich mag da auch nicht weiter überlegen. Im IE gibts bei einer Framekonstruktion den genannten Effekt, die "ordentlichen" Browser verhalten sich entsprechend den W3C-Vorgaben.
Du willst eine über einen Hover-, Activ(at)e- oder Focus-Effekt hinausgehende Zustandsänderung durchführen.
Letzten Endes ja. Siehe der Vorschlag unten von Axel.
Welcher Teil von HTML oder CSS erlaubt eine solche dauerhafte Zustandsänderung? Ich kenne keinen.
Ich eben auch nicht. Aber es hätt ja sein können, daß das eine Wissenslücke bei mir war. Scheint so, als sei es das nicht, was bedauerlich ist.
Grüße aus Berlin
Christoph S.
-
-
-
-
-
Hallo,
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 ...
Ohne JavaScript duerfte das im HTML|CSS-Kontext nicht machbar sein. Auch wenn es Dir wohl nicht direkt weiter hilft, hier das in SVG moegliche Vorgehen ohne eine Zeile Scriptcode:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="150" height="100" style="fill: #090; display: none">
<set attributeName="display" attributeType="CSS" to="block" begin="on.click"/>
<set attributeName="display" attributeType="CSS" to="none" begin="off.click"/>
</rect><rect x="50" y="50" width="150" height="100" style="fill: #F00; display: block">
<set attributeName="display" attributeType="CSS" to="none" begin="on.click"/>
<set attributeName="display" attributeType="CSS" to="block" begin="off.click"/>
</rect><a id="on" xlink:href=""><text x="70" y="200">grün -> on | rot -> off</text></a>
<a id="off" xlink:href=""><text x="70" y="230">rot -> on | grün -> off</text></a></svg>
Die beiden DIVs sind mal vereinfacht als Rechtecke simuliert [in SVG waere ein Analogon zu div das Element g (group)].
MfG, Thomas
-
hi Thomas,
Ohne JavaScript duerfte das im HTML|CSS-Kontext nicht machbar sein.
Schade. Ich wollte es einfach nicht glauben.
Auch wenn es Dir wohl nicht direkt weiter hilft, hier das in SVG moegliche Vorgehen
Doch, hilft schon nen bissel weiter, bedeutet allerdings erhebliche "Zusatzarbeit", weil ich letzten Endes die "javascriptfreie Alternative" als SVG anbieten müßte - dazu muß ich erstmal selber mit SVG besser klarkommen als bisher, und dann gibts natürlich das Problem, daß mein eventueller user höchstwahrscheinlich keinen SVG-Viewer hat und sich das Teil erst laden muß.
Christoph S.
-
Hallo,
Doch, hilft schon nen bissel weiter, bedeutet allerdings erhebliche "Zusatzarbeit", weil ich letzten Endes die "javascriptfreie Alternative" als SVG anbieten müßte - dazu muß ich erstmal selber mit SVG besser klarkommen als bisher, und dann gibts natürlich das Problem, daß mein eventueller user höchstwahrscheinlich keinen SVG-Viewer hat und sich das Teil erst laden muß.
Das war auch nicht als echte Alternative fuer heutige "real-life"-Sites gedacht, zeigt aber auch ein wenig, wie elegant man Dinge in SVG loesen kann/koennte. Z. B. wurde dieses Pull-Down-Menue nur mit Animationselementen realisiert: http://www.datenverdrahten.de/svglbc/?code=pulldownmenue_s (die JS-Alerts sollen nur auf die ausgeloesten Klick-Aktionen hinweisen).
MfG, Thomas
-
-