Plaatje aanpassen aan de grootte van het window
Hier wordt behandeld hoe je je website kunt laten reageren op de beschikbare afmetingen van het window waarin je pagina wordt getoond. Dat wordt gedaan aan de hand van een voorbeeld: Als je onderstaande knop aanklikt verschijnt een nieuw venster met daarin een plaatje. Als je dit venster groter of kleiner maakt, verandert de grootte van het plaatje mee.
De code staat onderaan deze pagina. Je kunt hem ook downloaden, inclusief het plaatje.
- Er worden twee items besproken:
- Het JavaScript om het plaatje met het juiste formaat op het scherm te zetten
- Het attribuut onresize in de <BODY>-tag.
- Het script bepaalt de beschikbare ruimte in pixels (beeldpunten) binnen het window waarin het document wordt getoond. Hierbij wordt onderscheid gemaakt tussen NetScape, Opera en Internet Explorer.
- Het script heeft 4 parameters, te weten p, w, h en f.
De parameter p bevat de naam van het plaatje, dat kan eventueel een pathname zijn. Om het script goed te laten werken, moet je de waarden van w en h (breedte resp. hoogte van het plaatje) correct opgeven. - w en h geef je op in pixels.
- Met de parameter f regel je het deel van de beschikbare ruimte in het window dat gebruikt wordt
door het plaatje. Hieraan zijn geen beperkingen verbonden. Neem f voor een goed resultaat tussen 0.3
en 1.0.
Als je f groter neemt dan 1.0 kan het resultaat onvoorspelbaar worden.
- Elke keer dat het window van grootte wordt veranderd, ontstaat de event resize. Met de eventhandler
onresize kun je hier op reageren. Hier wordt gebruik gemaakt van:
onresize="self.location.reload()"
Hierdoor wordt de huidige pagina in zijn geheel opnieuw geladen. Daardoor wordt ook het script uitgevoerd, waardoor het plaatje in een ander formaat op het scherm verschijnt.
Gebruik:
- De code staat in de <BODY>-tag en in de <BODY> zelf.
De code ziet er als volgt uit:
(Neem het volgende attribuut op in de BODY-tag)
onresize="self.location.reload()"
(Zet dit JavaScript in de <BODY> op de plaats waar het plaatje moet komen)
<script>
<!--
// Map de omvang van het plaatje op de beschikbare grootte van het scherm.
// De kleinste afmeting van het window is bepalend!
// (c) Ben Boukes, 2003. Mag vrij worden gebruikt.
// Werkt met Internet Explorer 4+, NetScape 4+ en Opera 7+
var p = 'hoezo-17.gif'; // Bestand met het plaatje
var w = 376; // Breedte van het plaatje
var h = 440; // Hoogte van het plaatje
var f = 0.80; // Bruikbaar gedeelte: Hier is dat 80% van de beschikbare hoogte en breedte van het document
/*----------- Hieronder niets wijzigen ----------- */
if(window.innerWidth) { // NetScape of Opera
h = Math.floor(f*window.innerHeight);
w = Math.floor(f*window.innerWidth);
} else if (document.body.clientWidth) { // IE
h = Math.floor(f*document.body.clientHeight);
w = Math.floor(f*document.body.clientWidth);
}
document.write('<img src="',p,'" border="0" alt="Resize dit window!" vspace="10" hspace="10" ');
if (w < h) document.write('width="',w,'">');
else document.write('height="',h,'">');
// einde van dit script -->
</script>
Downloaden:
Druk op de knop:
File: voorb095.zip, 14 223 bytes.
Opmerking:
Dit script werkt met de beschikbare ruimte binnen een (browser-)window. Het gaat dus over de relatie tussen
een window en een web-pagina. Het is niet geschikt om de grootte van een window op het beeldscherm te kiezen.
Zie daarvoor het item "Het object 'Screen' gebruiken".
Een modernere methode is te vinden in het item Plaatje aanpassen aan
de grootte van het window II: Aanpak met CSS.
