Ebene oder Foto automatisch öffnen und schließen...

rainer-gerhard schrieb am 25.03.2017 um 13:03 Uhr

Hallo miteinander,

ich möchte gern auf einer neu gestalteten Internetseite folgenden Effekt erzielen: nachdem die Seite vom Besucher geöffnet wurde, soll sich nach einer definierten Zeit von x Sekunden eine Ebene oder ein Foto öffnen, für eine wiederum definierte Zeit geöffnet bleiben und dann wieder verschwinden.
Ich kann mir nicht vorstellen, dass das mit dem Webdesigner 12 nicht machbar sein soll – krieg's aber nicht hin. Es wäre toll, wenn jemand eine Idee hätte, wie man das realisieren kann??

Wen es interessiert: die Seite hat die Domain tocc-online.de

Ich freue mich über jeden Tipp..
Rainer-Gerhard

Kommentare

BeRo schrieb am 26.03.2017 um 23:16 Uhr

[...] Es wäre toll, wenn jemand eine Idee hätte, wie man das realisieren kann?´[...]

Du bekommst sogar mehr als nur eine Idee.

Mit ein paar Zeilen JavaScript bist Du geholfen 😇

Die u. a. JS Funktion kopierst Du in den HTML Head der Seite:

<script type="text/javascript">
function Timer(){
{setTimeout("xr_cpu(5)", 5000);}
{setTimeout("xr_ppc('xr_xp5')", 15000);}
}
</script>

Den u. a. Funktionsaufruf kopierst Du in den HTML Body der Seite:

<script type="text/javascript">
window.onload=(Timer());
</script>

Fertig!

Ab jetzt wird 5 Sekunden nach dem Öffnen der Seite die popup Ebene 5 eingeblendet und 10 Sekunden später wieder geschlossen.

Wie das in der Praxis aussieht, das kannst Du Dir in dieser online Demo anschauen, die ich vor 4 Jahren für einen anderen Beitrag erstellt habe.

Wenn Du den Tipp für Deine Site umsetzen willst, musst Du nur daran denken, die im Code fett gezeigten Werte anzupassen.
Der Indexwert für die popup Ebene (hier = 5) ist abhängig von der Position der Ebene. Gezählt wird von unten nach oben, beginnend mit 0 (Null) bei der Pasteboard background Ebene.

Außerdem musst Du einen Link auf die Ebene legen (kann ein dummy Link sein), damit der WD die Ebene als popup Ebene "sieht". Der Link, z. B. mit einem Button, kann (sollte) außerhalb der sichtbaren Seiten angelegt werden.

Die Zeitsteuerung wird in Millisekunden angegeben, hier sind das 5000 mS für die Wartezeit bis zum Einblenden der popup Ebene und 15000 mS bis zum Schließen.
Beide Timer laufen zeitgleich los. Die Zeitspanne, in der die pu Ebene sichtbar ist, beträgt also nur 10.000 mS (15.000 - 5.000 = 10.000).

Viel Erfolg beim Ausprobieren

rainer-gerhard schrieb am 27.03.2017 um 17:54 Uhr

Hallo BeRo,
vielen Dank für deine schnelle Hilfe! Das Einbauen der Scripte war kein Problem. Das Ergebnis so, wie ich es haben wollte – toll. Eine Frage aber habe ich noch: Meine Seite ist mit drei Varianten "responsive" aufgebaut, also für den Desktop in Monitorgröße, für das Tablet und das Smartphone. Die zeitgesteuert eingeblendete Ebene wollte ich nur in den beiden größeren Varianten einsetzen, die Smartphone-Version enthält die Einblend-Ebene gar nicht. Die Monitor-Version funktionierte auf Anhieb bestens - in der Tablet-Variante tat sich jedoch gar nichts. Die Scripte habe ich natürlich genauestens verglichen, um Fehler im Script ausschließen zu können.
Was kann der Grund dafür sein? Du kannst gern einmal auf die Seite schauen, hier ist ein Link dorthin...

Noch einmal vielen Dank und schöne Grüße
Rainer-Gerhard

BeRo schrieb am 29.03.2017 um 00:44 Uhr

[...] in der Tablet-Variante tat sich jedoch gar nichts. [...]

Sorry, für die verspätete Antwort. Die Ursprungsfrage war als gelöst markiert, dass sich da noch eine neue Frage "versteckt" hat, habe ich glatt übersehen. 😣

Der WD sammelt alle Varianten einer Seite in einer HTML Datei. Das führt dazu, dass z. B. neu angelegte Ebenen mehrfach vorkommen. Damit die Zuordnung (Desktop, Tablet, Smartphone) korrekt funktioniert, bekommen die Ebenen in den Varianten einen neuen Index.
Die Ebene mit dem Index 5 aus der Desktop Variante bekommt dann z. B. den Index 26 in der Smartphone Variante usw.

Du musst also dafür sorgen, dass Dein Script, das Du für die Desktop Variante benutzt, ergänzt wird um die Steuerung der popup Ebenen der angelegten Variante(n).
Das kann so aussehen:

<script type="text/javascript">
function Timer(){
{setTimeout("xr_cpu(5)", 5000);}
{setTimeout("xr_ppc('xr_xp5')", 15000);}
{setTimeout("xr_cpu(26)", 5000);}
{setTimeout("xr_ppc('xr_xp26')", 15000);}
}
</script>

Neu hinzugekommen sind die fett markierten Zeilen. Das komplette Script gilt in jedem Fall für alle Varianten. Es werden also immer alle eingetragenen popup Ebenen referenziert, auch wenn sie nur in der jeweils aktiven Variante sichtbar werden.

Welchen Index die popup Ebenen in den Varianten der Mobilgeräte tatsächlich haben, das musst Du im Einzelfall vorab prüfen.

Viel Erfolg

rainer-gerhard schrieb am 29.03.2017 um 17:45 Uhr

Hallo BeRo,

mein Dankeschön für die Hilfe – es funktioniert auf allen drei Varianten. Super!

Mit freundlichen Grüßen
Rainer-Gerhard

BeRo schrieb am 29.03.2017 um 20:46 Uhr

[...] es funktioniert auf allen drei Varianten. [...]

Gratuliere!
Aber es funktioniert nur richtig, wenn Du die Seite vorgeladen hast.
In "echt", also bei leerem Browser Cache, dauert das Laden der Seite ca. 1 volle Minute und in der Zeit kannst Du keine popup Ebenen einblenden. Der Script Code läuft zwar korrekt ab, das Einblenden funktioniert aber in der Zeit nicht. Du siehst lediglich eine kleine Platzhalter Grafik. Das betrifft auch die Social Media Links.

Als Problemlösung könntest Du das Einblenden der Info soweit verzögern, bis die Seite komplett geladen ist. Aktuell wird das also erst nach mehr als 1 Minute der Fall sein.

Bei einem Refresh der Seite, wenn der Browser Cache gefüllt ist, funktioniert es.
Wenn Du jetzt noch das "schließen" Icon ausblendest, wird's perfekt.

Viel Erfolg