HEY HO! - let's go!

Bild an Clienteigenschaften anpassen

Mit dem document-Objekt lässt sich die Breite des Clientfensters ermitteln. Wir wollen die Größe des Browserfensters überprüfen, um dann dynamisch die Größe des Tieres anpassen zu können. Ein Unterschied besteht zwischen den Abmaßen des Browserfensters insgesamt - also mit Titel-, Symbol- und sonstigen Leisten; und denen des Clientfensters: das zeigt nur die Seite an.

Die Eigenschaften body.clientWidth und body.clientHeight des Dokuments enthalten Breite und Höhe des Clientfensters. Letzteres verwenden wir für die Funktion tierAnpassen(). Da es für jedes Element einer Website ein style-Objekt gibt, kann auf Breite und Höhe jedes Elements zugegriffen werden. Ans Element heran kommen wir wie gehabt mit der document.getElementById()-Methode. Daran angefügt wird die Style-Eigenschaft Höhe; die Breite wird automatisch proportional gesetzt. Insgesamt geht der Code so:

document.getElementById("tierchen").style.height = (document.body.clientHeight - 60) * 0.9;. Die Anpassung des Bildes an die Clientseite finden statt bei body onload und body onresize. Ersteres gilt generell, egal, mit welcher Bildschirmgröße die Seite geöffnet wird, proportional ist das Bild auf einem 21'- Monitor genau so groß wie auf einem mobilen Gerät. Zweiteres wirkt dahingehend anpassend, dass der Nutzer selbst das Ausgabefenster vergrößert oder verkleinert. Einziger Haken bei letzterem ist, dass die Anpassung - da wir die Höhe des Clientfensters in der Funktion als Maßstab nehmen - händisch nur gut funktioniert, wenn der Nutzer das Fenster proportional verkleinert (mit dem Pfeil diagonal nach oben) und nicht, er es nur horizontal schmaler schiebt.

<html>
<head>
<title>Dein Tier passt sich an Fenstergröße an</title>

<script type="text/javascript">
	var benutzer;
	
	function tierAnpassen() {
        document.getElementById("tierchen").style.height =↵
(document.body.clientHeight - 60) * 0.9;
      }
	  
	function begruessen() {
        alert('Hallo, ich bin Dein Tier.');
      }

    function tierAngefasst() {
        if (benutzer) {
          alert("Das gefällt mir, " + benutzer + ". Danke.");
        }
        else {
          benutzer = prompt("Wie heißt du?", "Gib deinen Namen ein.");
          if (benutzer)
            alert("Schön, dich kennenzulernen, " + benutzer + ".");
        }
        document.getElementById("tierchen").src = "images/tier_blau_gluecklich.png";
        setTimeout("document.getElementById('tierchen').src =↵
'images/tier_blau_traurig.png';", 10000);
      }
</script>
</head>

<body onload="tierAnpassen(); begruessen();" onresize="tierAnpassen();">
	 
<div style="margin-top:100px; text-align:center">
<img id="tierchen" src="images/tier_blau_neutral.png" alt="Klick zum Streicheln"↵
title="Klick zum Streicheln" style="cursor:pointer" onclick="tierAngefasst();" />
</div>
<div id="sag_was_zur_funktion">Mach PopUp-Fenster größer und kleiner!</div>

</body>
</html>

Please note: die Pfeilchen ↵ sind bei der Wiederverwertung zu löschen: wird der Code kopiert, werden an deren Stelle Fragezeichen generiert, Achtung deshalb! Bitte keinen manuellen Zeilenumbruch an diesen Stellen. Die Abrage if(window.opener)... bitte ebenfalls löschen, wenn Seite nicht als PopUp aufgerufen wird.