Zeitgesteurtes Ein-/Ausblenden von Layern

[Roberto Cozzetto]

Hallo zusammen

Ich bin auf der Suche nach einem Script, der es mir auf einer Website erlaubt, zwei verschiedene Layer in Abständen von einer bestimmten Zeit (zB 10 Sekunden) abwechselnd an der gleichen Stelle anzuzeigen.

Ich habe die beiden Layer mittels CSS im Head-Bereich definiert; der erste Layer hat die visibility:visible, der zweite ist hidden.

Nun soll nach 10 Sekunden der zweite Layer eingeblenden werden, der erste ausgeblendet; nach weiteren 10 Sekunden wieder das gleiche, jedoch umgekehrt, und das in einer Endlosschlaufe.

Danke für die hilfreichen Tipps.
Gruss aus der Schweiz
Roberto

[Rouven]

Hi,

weißt du wie ein-/ausblenden funktioniert? Wenn nicht document.getElementById+style+visibility.

Dazu startest du im onload-Event ein window.setInterval, das eine Austauschfunktion aufruft.

Zusätzlich legst du eine globale Variable an, in der du dir merkst welches Bild du gerade anzeigst (alternativ kannst du auch einfach gucken welches von beiden gerade visible ist oder du gehst einfach alle durch und invertierst ihren Visibility-Wert).

MfG
Rouven

[Gunnar Bittersmann]

Hello out there!

weißt du wie ein-/ausblenden funktioniert? Wenn nicht document.getElementById+style+visibility.

Dabei müsste man aber beide Elemente deckungsgleich positionieren. Das kann man sich bei Verwendung von http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display sparen.

Dazu startest du im onload-Event ein window.setInterval, das eine Austauschfunktion aufruft.

... die wiederum ein Intervall startet ...

Zusätzlich legst du eine globale Variable an, in der du dir merkst welches Bild du gerade anzeigst (alternativ kannst du auch einfach gucken welches von beiden gerade visible ist oder du gehst einfach alle durch und invertierst ihren Visibility-Wert).

Was ist daran einfach? Einfach ist: die globale Variable ist einfach nur ein Flag, was bei jedem Wechsel negiert wird:

if (flag) {  
  document.getElementById("foo").style.display = "block";  
  document.getElementById("bar").style.display = "none";  
}  
else {  
  document.getElementById("foo").style.display = "none";  
  document.getElementById("bar").style.display = "block";  
}  
flag = !flag;

See ya up the road,
Gunnar

[Rouven]

Hi,

flag = !flag;

korrekt, deswegen war das mein erster Vorschlag.
Mir fällt sowieso gerade auf, dass mir die CSS-Entwickler in dem Punkt Visibility gegen den Strich gehen. Bei VB/C#/SWT-Entwicklung kann man Sichtbarkeitsstatus immer so schön invertieren, also
x.visible = !x.visible.
War bis gerade davon ausgegangen, dass CSS das auch mitmacht und merke gerade erst, dass es so nicht funktioniert. Dementsprechend ist die Variante mit dem Flag in der Tat die beste Variante, zumal auch leichter auf mehrere Elemente ausdehnbar.

Ach ja, und das mit der Visibility hat der OP in den Raum geworfen, ich arbeit sonst auch mit block und none...

MfG
Rouven

[Cybaer]

Hi,

Bei VB/C#/SWT-Entwicklung kann man Sichtbarkeitsstatus immer so schön invertieren, also
x.visible = !x.visible.

Na, das unterscheidet sich aber wirklich kolossal von der JS-Syntax:

x.visibility=(x.visibility=="visible")?"hidden":"visible"

Das erfordert offensichtlich ein komplexeres Konzept ... =;-)

Gruß, Cybaer

[MudGuard]

Hi,

Dazu startest du im onload-Event ein window.setInterval, das eine Austauschfunktion aufruft.

... die wiederum ein Intervall startet ...

Wozu bei jedem Aufruf noch ein Intervall?
Mit dem einen bei onload initialisierten Intervall wird die Funktion doch schon alle 10 Sekunden aufgerufen.

Wenn die Funktion selbst auch noch ein Intervall startet, wird die Funktion nach dem ersten Aufruf bereits 2mal alle 10s aufgerufen, nach dem 3. Aufruf schon 3mal pro 10s usw.

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Wozu bei jedem Aufruf noch ein Intervall?

Argl, verwehcslet mit setTimeout().

See ya up the road,
Gunnar

[Roberto Cozzetto]

Danke an alle, mit eurer Hilfe konnte ich mein Problem lösen.
Gruss
Roberto