wechselnde anzeige im fixen bereich

[Felix Riesterer]

Lieber Mathias,

Dieter hat Dir ja schon seine Vorschläge gemacht. Ich möchte seine Vorschläge noch stark vereinfachen.

ich habe auf meiner page einen fixen bereich namens .top_container.

Warum "nur" in einer Klasse und nicht in einer ID? Hast Du mehrere solcher Container?

dieser bereich wird mit einem CSS sheet formatiert.

Löblich, aber warum sehe ich da HTML-Reste in Form von align-Attributen und Ähnlichem? Wenn schon CSS, dann aber konsequent!

<p id="text1" class="Stil6" align="center">
<img src="feuerwerk.gif" align="absmiddle"/>75 Jahre FC Laubach
<img src="feuerwerk.gif" align="absmiddle"/></p>

Das könnte sinnvollerweise so aussehen:

<p id="text1"><img src="feuerwerk.gif />75 Jahre FC Laubach<img src="feuerwerk.gif /></p>

und dann nach 10 sek. diese hier :

<p id="text2" class="Stil6" align="center">Jubiläums Turnier vom ....</p>

Auch hier vereinfachen wir:

<p id="text2">Jubiläumsturnier vom ...</p>

So. Nun haben wir also zwei Textabsätze mit den IDs "text1" und "text2". Diese sitzen in einem <div> mit (hoffentlich) der ID "top_container". Das sieht dann wahrscheinlich etwa so aus:

<div id="top_container">  
    <p id="text1"><img src="feuerwerk.gif />75 Jahre FC Laubach<img src="feuerwerk.gif /></p>  
    <p id="text2">Jubiläumsturnier vom ...</p>  
</div>

Das sollte uns für's erste reichen.

CSS:

#text1,  
#text2 {  
    display: none; /* damit es beim Laden nicht sichtbar ist */  
    text-align: center; /* dann braucht es dieses "align"-Attribut nicht mehr */  
}  
  
#text1 img {  
    vertical-align: middle; /* für die Bilder */  
}

wie kann ich das lösen das die formate der beiden textzeilen erhalten bleiben ?

Indem Du ausschließlich mit der Eigenschaft "display" herumspielst! Per CSS sind beide Texte nicht zu sehen. Es wird bei display:none auch kein Platz reserviert. Wenn Du das möchtest, dann sollte man anstatt "display" lieber "visibility" verwenden.

Mittel Javascript kannst Du dann diese Eigenschaft verändern (wirkt wie ein inline-Style-Attribut):

function an_aus(id) {  
    var element = document.getElementById(id);  
    var altesDisplay = element.style.display;  
  
    // sollte altesDisplay einen Wert haben, dann wurde dieser per Javascript gesetzt.  
    if (altesDisplay != "")  
        element.style.display = ""; // Urzustand (unsichtbar) wieder herstellen  
    else  
        element.style.display = "block"; // sichtbar schalten  
}

Diese Funktion kannst Du z.B. aus einer setTimeout-Funktion aus aufrufen lassen, oder auf Anklicken eines Links, oder oder oder.

Beispiel für das zeitverzögerte Ein- und Ausblenden:

window.setTimeout(  
    function () {  
        // Dieses wird nach 2100 Millisekunden ausgeführt  
        an_aus("text1"); // Text1 sichtbar  
        window.setTimeout(  
            // Dieses wird nach dem ersten Einblenden mit 3000 Millisekunden Verzögerung ausgeführt  
            function () {  
                an_aus("text1"); // Text1 wieder unsichtbar  
                an_aus("text2"); // Text2 sichtbar  
                window.setTimeout(  
                    // Dieses wird nach dem "Umblenden" mit 3500 Millisekunden Verzögerung ausgeführt  
                    function () {  
                        an_aus("text2"); // Text2 wieder unsichtbar  
                    },  
                    3500 // Verzögerung dritter Timeout  
                );  
            },  
            3000 // Verzögerung zweiter Timeout  
        );  
    },  
    2100 // Verzögerung erster Timeout  
);

Liebe Grüße aus Ellwangen,

Felix Riesterer.