Textfeld ausblenden und wieder einblenden - auf fixierter Ebene

abacaxi3000 schrieb am 01.11.2014 um 11:49 Uhr

Hallo zusammen,

ein Projekt beendet, da kommt direkt das nächste (und anspruchsvollere). Was ich gerne hätte: Auf meinen Seiten wird es fixierte Textfelder geben. D.h. Bilder lassen sich scrollen, aber die Texte bleiben. Da es teilweise etwas stört, wenn die Texte drüber liegen, hatte ich gehofft, die per Klick auf ein Symbol ( - oder Pfeil o.Ä.) ausblenden zu lassen.

Im Optimalfall würde sich dann natürlich auch das Symbol ändern (also entgegengesetzter Pfeil oder +), sodass man Text wieder einblenden kann. Das ganze soll dann auch auf einer fixierten Ebene stattfinden.

Was ich selber durch experimentieren mit PopUp Ebenen geschafft habe, ist eigentlich das genaue Gegenteil. Die Seite öffnet sich, der Text ist ausgeblendet und per Klick auf ein Plussymbol blendet der Text ein. Wenn ich dann irgendwo hin klicke verschwindet der Text wieder. Das ganze bleibt auch fixiert! Ein kleiner Erfolg, aber eigentlich nicht das was ich wünsche.

Bisher wurde mir hier immer vorblildlich geholfen. Ich hoffe auch bei diesem Projekt.

Grüße, Marcus

PS: Genutzt wird Web Designer 9

Kommentare

abacaxi3000 schrieb am 03.11.2014 um 14:45 Uhr

Weiß keiner eine Idee?

abacaxi3000 schrieb am 03.11.2014 um 21:46 Uhr

Eine andere Frage. Ich habe mir jetzt überlegt, dass es für mich einfacher wäre, die Seite so zu gestalten, dass der Text beim betreten der Seite ausgeblendet ist und mittels Popup eingeblendet werden kann. Dazu habe ich einen Button erstellt, auf den geklickt wird und der Text erscheint. Soweit kein Problem.

Gibt es denn die Möglichkeit, dass der Button ausgeblendet wird, wenn der Text erscheint? Wäre dann für meine Fähigkeiten die eleganteste Lösung...

Grüße, Marcus

BeRo schrieb am 04.11.2014 um 00:06 Uhr

[...] Gibt es denn die Möglichkeit, dass der Button ausgeblendet wird, wenn der Text erscheint? [...]

Das ist kein Problem.

2 Varianten bieten sich dafür an:

Du überdeckst den Button mit dem Text, den du einblendest.
(Dazu müsstest Du dem Text ggf. einen opaquen Hintergrund verpassen)
Du legst den Button auf eine popup Ebene, die beim Öffnen der Seite automatisch angezeigt wird.
(Dazu genügt eine Zeile HTML Code die im HTML Body der Seite abgelegt wird.
Die sieht z. B. so aus: <body OnLoad="xr_cpu(4)">)
Der Link, der die (popup) Textebene anzeigt, wird als JS Befehl eingegeben, der erweitert wird um einen Befehl, der die Button Ebene schließt.
Das sieht z. B. so aus: javascript: xr_cpu(6), xr_ppc('xr_xp4');

Die oben gelb markierten Zahlenwerte sind abhängig von der Anzahl- und Position der Objekte/Ebenen, die mit den Befehlen gesteuert werden. Die für Deine Seite passenden Werte siehst Du z. B. in der Statuszeile des Browsers, wenn Du den Mauszeiger auf einem Link stehen lässt.

So kann die JS Link Zeile eingebaut werden:

Wie immer, wenn Du mit popup Ebenen arbeitest, musst Du daran denken, dass diese Ebenen i. d. R. geschlossen werden, wenn jemand außerhalb des Ebenen Bereichs klickt.
Das lässt sich zwar vermeiden, wenn Du die Ebenen Eigenschaften auf "nicht automatisch schließen" einstellst, das hat aber den Nachteil, dass die eingeblendeten Ebenen Inhalte oben rechts das "schließen" Kreuz zeigen.
Das lässt sich nur vermeiden, wenn Du den Namen einer Ebene, die nicht automatisch geschlossen werden soll, um die Anweisung " (lock)" erweiterst. Also Leerzeichen, Klammer auf, lock, Klammer zu.

Benutzt Du die Lösung 1, wird der Button automatisch wieder sichtbar, wenn die eingeblendete Ebene geschlossen wird.

Die Lösung 2 ist zwar deutlich komfortabler, sie zeigt aber nach dem Ausblenden der Textebene buchstäblich "Nichts", weil der Button ja nur beim Start eingeblendet wird.

Damit das nicht passiert, musst Du dafür sorgen, dass der Text über einen speziellen Button ausgeblendet wird, der auf der Textebene liegt. Der Button bekommt dann, genau wie der oben schon beschriebene Button, eine Zeile JavaScript als Link, die dafür sorgt, dass der Text ausgeblendet wird und der 1. Button zum Einblenden des Textes wieder angezeigt wird.

Die Zeile ist nahezu identisch mit der oben schon beschriebenen. Lediglich die Zahlenwerte erscheinen in umgekehrter Reihenfolge.

So sieht die Zeile aus: javascript: xr_cpu(4), xr_ppc('xr_xp6');

Und so kann eine Seite aussehen, die Infotexte auf einen Klick einblendet (Der Info Button liegt auf einer popup Ebene, die beim Seitenaufruf automatisch eingeblendet wird):

Nach einem Klick auf den Button "Infos zu den Bildern" wird der Infotext eingeblendet (s. Screenshot) und zusätzlich ein Button, der das Ausblenden des Textes erlaubt, wobei gleichzeitig wieder der Ursprungszustand der Seite hergestellt wird.

Jetzt bist Du dran...

Viel Erfolg

abacaxi3000 schrieb am 04.11.2014 um 22:34 Uhr

Die Lösung 2 gefällt mir tatsächlich am besten. Kannst du mir vielleicht die Seite mit deinen Beispielen zur Verfügung stellen, damit ich mir das besser anschauen kann? Direkt am Anfang habe ich anscheinend zwei Fehler gemacht, bzw. habe Unklarheiten:

Der Text der eingeblendet werden soll, liegt auf der Ebene "PopUp". Wenn ich dich richtig verstanden habe, soll der Butten, der auf diese Ebene verweist, auf einer eigenen PopUp Ebene liegen, bsp: PopUp2. Soweit richtig?

Denn wenn ich die html Codes und das Javascript in die von dir genannten Felder einfüge und in den Testmodus wechsel, erscheint der Button und der Text direkt, wobei der Button keine Funktion zu haben scheint.

Grüße, Marcus

PS: Vielen, vielen Dank für deine unnachgiebige Hilfe :)

BeRo schrieb am 04.11.2014 um 23:53 Uhr

[...] Kannst du mir vielleicht die Seite mit deinen Beispielen zur Verfügung stellen, [...]

Gerne. Du kannst die Projektdatei (ZIP) hier herunterladen.

[...] wenn ich [...] in den Testmodus wechsel, erscheint der Button und der Text direkt, wobei der Button keine Funktion zu haben scheint. [...]

Das liegt vermutlich daran, dass Du die Wertigkeit der popup Ebenen noch nicht festgelegt- bzw. noch nicht festgestellt hast.

Wie weiter unten schon erwähnt, sind die im Scriptcode gelb markierten Zahlenwerte nicht fix. Sie sind abhängig von der Anzahl- und von der Position der einzelnen popup Ebenen und von den einzublendenden Objekten.

Der beste (und manchmal einzig mögliche) Weg hier Klarheit zu bekommen, ist die Anlage von Dummy Buttons, denen Du einen Link auf die ein-/auszublendenden popup Ebenen verpasst. Wenn Du anschließend die Vorschau startest und den Mauszeiger auf einem Link Button stehen lässt, siehst Du in der Statuszeile des Browsers die benötigte JavaScript Zeile mit dem numerischen Wert, z. B. "javascript: xr_cpu(4)". Diesen Wert (hier "4") brauchst Du in den Scriptcodes, um die entsprechende Ebene ein-/ausblenden zu können.

So sieht der relevante Teil des Editorfensters aus:

Die für die Demo benötigten Dummy Link Buttons sind oben mit einem schwarzen Pfeil markiert. Sie müssen zunächst irgendwo im sichtbaren Teil der Seite liegen. Nachdem Du über die Vorschau die Links in der Statuszeile fetgestellt hast, müssen sie außerhalb des sichtbaren Bereichs Deiner Website abgelegt werden, damit sie das Layout nicht stören.
Sie dürfen aber unter keinen Umständen gelöscht werden, wenn keine anderen Links auf die popup Ebenen angelegt wurden. Ansonsten funktioniert das Ein-/Ausblenden der Ebenen nicht mehr!

Die im Screenshot lila markierten MouseOver Ebenen sind im Projekt ausgeblendet, weil die MO Funktion beim Ausblenden erst verschwindet, wenn der Mauszeiger bewegt wird. Das ist in dem Fall störend und daher inaktiv.

Der grün markierte Button zum Ausblenden des Infotextes liegt auf derselben Ebene, wie der Infotext (blau markiert). Er blendet sich also selbst aus.

Der rot markierte Button zum Einblenden des Infotextes, liegt auf einer eigenen popup Ebene. Er wird über diesen HTML Code eingeblendet "<body OnLoad="xr_cpu(4)">", der im HTML Body der Seite liegt.

Schau Dir dazu auch den Aufbau der Demo Projektdatei an. Ich bin sicher, dass Du danach Dein Projekt fertigstellen kannst.

Viel Erfolg

abacaxi3000 schrieb am 11.11.2014 um 14:15 Uhr

Spätes Feedback:

Dank deiner weiteren Erklärungen und dem Demo-File konnte ich alles erfolgreich bei mir umsetzen. Auch die ursprüngliche Idee, dass der Text direkt erscheint, konnte ich somit realisieren! Vielen, vielen Dank!!