JürgenB: Bild für X Sekunden anzeigen lassen

Beitrag lesen

SELF-Forum

Bild für X Sekunden anzeigen lassen

JürgenB Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Pascal,

du benötigst ein Bild mit einer Id, das per CSS absolut positioniert und versteckt wird:

<img id="intro" src="Margerite.jpg" width="250" height="250" border="0" alt="">

Die (absolute) Position des Bildes wird dann über left und top eingestellt. Evtl. muss man auch den z-Index setzen, damit das Bild über dem Text liegt. Bitte testen.

Die dazugehörige CSS-Anweisung sieht so aus:

#intro { position:absolute;left:100px;top:100px;display:none }

Dadurch wird das Bild absolut 100px vom oberen und linken Rand positioniert und ausgeblendet.

Jetzt fehlt nur noch das Javascript:

function ausblenden() {
    document.getElementById("intro").style.display = "none";
  }
  function einblenden() {
    document.getElementById("intro").style.display = "block";
  }

Diese Funktionen greifen auf das Bild mit der Methode getElementById zu und ändern die style-Eigenschaft display.

function onl() {
    einblenden();
    window.setTimeout("ausblenden()",5000);
  }

Diese Funktion blendet das Bild ein und startet um 5000 ms zeitverzögert die Ausblendefunktion. Diese Funktion darf erst nach dem Laden der Seite aufgerufen werden, da sonst das Bild noch nicht da ist. Dieses geschieht über den onload-Event:

window.onload = onl;

hier noch einmal alles zusammen:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta http-equiv="Content-Script-Type" content="text/javascript">  
<meta http-equiv="Content-Style-Type" content="text/css">  
<title>Test</title>  
<style type="text/css">  
 #intro { position:absolute;left:100px;top:100px;display:none }  
</style>  
<script type="text/javascript">  
  function ausblenden() {  
    document.getElementById("intro").style.display = "none";  
  }  
  function einblenden() {  
    document.getElementById("intro").style.display = "block";  
  }  
  function onl() {  
    einblenden();  
    window.setTimeout("ausblenden()",5000);  
  }  
  window.onload = onl;  
</script>  
<body>  
 <h1>Test</h1>  
 <img id="intro" src="Margerite.jpg" width="250" height="250" border="0" alt="">  
</body>  
</html>

Versuch bitte, das Script anhand der geposteten Links zu verstehen.

Gruß, Jürgen

Beitrag melden
–
Informationen zu den Bewertungsregeln