terug      HOME

Het 'DHTML' JavaScript

Venster afmetingen

Om de achtergrond aan te passen aan de vensterafmetingen moeten ten eerste deze vensterafmetingen vastgesteld worden. Deze properties van het window element worden bij de diverse browsers verschillend geaddresseerd.
Vaak wordt hierbij gebruik gemaakt van een zgn 'browsersniffer' script om te bepalen om welke browser het gaat. Daarna wordt de voor de gevonden browser syntax aangewend om de hoogte en breedte van het venster te verkrijgen.
Hier heb ik een andere weg gevolgd. Met het script laat ik vaststellen of één van de voorkomende browser syntaxes gebruikt wordt en zo ja dan wordt deze gebruikt om de hoogte winHgt en breedte winWid van het venster vast te stellen. 
 if (self.innerHeight && self.innerWidth) {                                            //Netscape syntax 
    winHgt = self.innerHeight;
    winWid = self.innerWidth;
 } else if (window.innerHeight && window.innerWidth) {              //Mozilla(+FF), Opera, Chrome syntax
    winHgt = window.innerHeight;
    winWid = window.innerWidth;
 } else if (document.documentElement.clientHeight && document.documentElement.clientWidth) { //IE syntax
    winHgt = document.documentElement.clientHeight;
    winWid = document.documentElement.clientWidth;
 }

 

Een <div> als achtergrondlaag

Het is niet mogelijk iets te wijzigen aan de afmetingen van de achtergrond afbeelding. Dit lossen we op door de afbeelding, in plaats van de body achtergrond, te plaatsen in een layer. Deze <div> geven we een z-index van -1 waardoor deze <div> achter de inhoud van de <body> geplaatst wordt en zodoende een achtergrond simuleert. In deze <div> plaatsen we een afbeelding waarvan de afmetingen gelijk gemaakt worden aan de waarden in winHgt en winWid. Met het script stellen we de HTML code voor de <div> samen en plaatsen we het in de pagina met het commando document.write 
 var scaleWidth = true;   //Zet éen van de twee naar false als
 var scaleHeight = true;  //vervorming van de afbeelding ongewenst is.
    //Met scaleWidth=true blijft de breedte van de afbeelding gelijk aan de vensterbreedte.
    //Met scaleHeight=true blijft de hoogte van de afbeelding gelijk aan de vensterhoogte.
 var imSRC = "../images/achtergrondafbeelding.jpg"; imWid = 2400; imHgt = 1800;
    //geef pad en naam van de achtergrondafbeelding en voer de afmetingen van deze afbeelding in
    //Prepareer de afbeelding met een ratio van 4:3.
    //Houdt rekening met een hoog resolutie scherm +/- 2400px x 1800px
 imStr = '<div style="position:absolute;left:0px;top:0px;z-index:-1">'
         + '<img src="' + imSRC + '" border="0px"';
 if (scaleWidth) imStr += ' width="' + winWid + 'px"';
 if (scaleHeight) imStr += ' height="' + winHgt + 'px"';
 imStr += '></div>';
 document.write(imStr);

Als bovenstaand script uitgevoerd wordt in een browser met een venster van bijvoorbeeld 1200 x 900 px dan zal de volgende regel samengesteld worden:

 <div style="position:absolute;left:0px;top:0px;z-index:-1">
       <img src="../images/achtergrondafbeelding.jpg" border="0px" width="1200px" height="900px">
 </div>

Met het commando document.write wordt deze regel aan het HTML in de body worden toegevoegd, waardoor de afbeelding als achtergrond van de body wordt weergegeven met de maten van het venster.

Automatisch schalen met behoud van ratio

In het bovenstaande script staat al in de remarks dat de verhoudingen van de afbeelding zullen veranderen met de verhoudingen van het venster. Dit is te wijzigen door slechts één van de afmetingen te bepalen. Dit kan ook automatisch met script geregeld worden, dusdanig dat één van de zijdes van de afbeelding even groot is als de corresponderende zijde van het venster en dat de andere zijde van de afbeelding buiten het venster zal uitsteken. Met een formule wordt geëvalueerd hoe de zijden van de afbeelding en het venster zich verhouden. Door deze regel uit te voeren voor dat het samenstellen van bovenstaande regel zal alleen de hoogte of de breedte opgenomen worden. Hierdoor zal de afbeelding zijn eigen ratio behouden.

 if ((imHgt / winHgt) < (imWid / winWid)) scaleWidth = false;
	else scaleHeight = false;

Aanpassen aan wijzigend Venster

Als het venster vergroot of verkleind wordt moet de afmeting van de afbeelding gewijzigd worden. Dit lossen we op door bij een zgn OnResize van de body, de pagina opnieuw te laten laden. Hiervoor lijken er verschillende oplossingen te zijn, afhankelijk van browser en HTML versie. Het is moeilijk een goed concept te vinden dat onder alle omstandigheden naar behoren werkt. Zelf heb ik uitgebreid getest met XHTML 1.0 Transitional en Strict in IE 7, Firefox 3, Opera 9 en Google Chrome 1.0 en de toevoeging onresize="location.href=location.href" aan de <body> tag werkt:

 <body onresize="location.href=location.href" style="overflow:hidden" scroll = "no">
 <script language="JavaScript1.2" type="text/javascript">
 <!--
    makeIm();  //aanroepen van het complete script voor het plaatsen van de afbeelding op maat
 //-->
 </script>

Scrollbars verbergen

Omdat de afbeelding zo goed als zeker in de hoogte of breedte buiten het venster zal komen zal er een scrollbar verschijnen. Als we dit niet willen kunnen we dat uitschakelen.
In bovenstaand stukje script staat in de <body> tag style="overflow:hidden". Dit verbergt de scrollbars in alle browser behalve IE7. Voor IE 7 is de toevoeging scroll = "no".

De complete pagina met script

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script language="JavaScript1.2" type="text/javascript">
 <!--
 var scaleWidth = true;   //Zet éen van de twee naar false als
 var scaleHeight = true;  //vervorming van de afbeelding ongewenst is.
    //Met scaleWidth=true blijft de breedte van de afbeelding gelijk aan de vensterbreedte.
    //Met scaleHeight=true blijft de hoogte van de afbeelding gelijk aan de vensterhoogte.
 var imSRC = "../images/achtergrondafbeelding.jpg"; imWid = 2400; imHgt = 1800;
    //geef pad en naam van de achtergrondafbeelding en voer de afmetingen van deze afbeelding in
    //Prepareer de afbeelding met een ratio van 4:3.
    //Houdt rekening met een hoog resolutie scherm +/- 2400px x 1800px
 function makeIm() {
 if (self.innerHeight && self.innerWidth) {                                            //Netscape syntax 
    winHgt = self.innerHeight;
    winWid = self.innerWidth;
 } else if (window.innerHeight && window.innerWidth) {              //Mozilla(+FF), Opera, Chrome syntax
    winHgt = window.innerHeight;
    winWid = window.innerWidth;
 } else if (document.documentElement.clientHeight && document.documentElement.clientWidth) { //IE syntax
    winHgt = document.documentElement.clientHeight;
    winWid = document.documentElement.clientWidth;
 }

 if ((imHgt / winHgt) < (imWid / winWid)) scaleWidth = false;
	else scaleHeight = false;

 imStr = '<div style="position:absolute;left:0px;top:0px;z-index:-1">'
         + '<img src="' + imSRC + '" border="0px"';
 if (scaleWidth) imStr += ' width="' + winWid + 'px"';
 if (scaleHeight) imStr += ' height="' + winHgt + 'px"';
 imStr += '></div>';
 
 document.write(imStr);
 }
 //-->
 </script>
 </head>
 
 <body onresize="location.href=location.href" style="overflow:hidden" scroll = "no">
 <script language="JavaScript1.2" type="text/javascript">
 <!--
    makeIm();  //aanroepen van het complete script voor het plaatsen van de afbeelding op maat
 //-->
 </script>

 ****De inhoud van je pagina****

 </body>
 </html>