Afbeeldingen in een webpagina
Nu gaan we het Image-object bekijken wat beschikbaar is sinds JavaScript 1.1 (d.i. sinds Netscape Navigator 3.0). Aan de hand van het Image-object kunnen we afbeeldingen veranderen in een webpagina. Dit laat ons toe om op een eenvoudige manier animaties te creeren.
Let er op dat gebruikers van oudere browsers (zoals Netscape Navigator 2.0 of
Microsoft Internet Explorer 3.0 - zij herkennen JavaScript 1.0) deze scripts niet kunnen verwerken - of ze zien niet het volle effect.
Laat ons eerst zien hoe we afbeeldingen benaderen vanuit JavaScript. Alle afbeeldingen worden voorgesteld als een array. Deze array heet images. Het is een property van het document-object. Iedere afbeelding in onze webpagina krijgt een volgnummer. De eerste abeelding krijgt volgnummer 0, de tweede afbeelding krijgt volgnummer 1 enz. Aldus kunnen we de eerste afbeelding adresseren als document.images[0].
Iedere afbeelding in ons HTML-document wordt gezien als een Image-object. Een Image-object heeft bepaalde properties die we kunnen manipuleren dmv JavaScript. We kunnen bijvoorbeeld de grootte van een afbeelding opvragen dmv de properties width en height.
document.images[0].width geeft ons de breedte (in pixels) van de eerste afbeelding in onze webpagina.
Zeker als we heel veel afbeeldingen in een pagina verwerken wordt het moeilijk om ze te nummeren en makkelijk om de tel kwijt te raken. Daarom kunnen we een naam toekennen aan elke afbeelding via volgende tag:
<img src="img.gif" name="afbeelding" width=100 height=100>
we kunnen nu de afbeelding op volgende manier adresseren : document.afbeelding of document.images["afbeelding"].
Het laden van nieuwe afbeeldingen
Alhoewel het handig is de grootte van een afbeelding in een webpagina te kennen toch willen we meer aanvangen met die afbeelding. We willen de afbeelding dynamisch wijzigen. Hiervoor gebruiken we de src-property. De src property in de <img>tag geeft ons toegang tot de afbeelding. Aan de hand van JavaScript 1.1 kunnen we de source van een afbeelding wijzigen en dit van een afbeelding die reeds werd geladen. Het resultaat is dat de afbeelding vervangen wordt door de nieuwe afbeelding. Bekijken we even volgend voorbeeld:
<img src="img1.gif" name="afbeelding" width=100 height=100>
De afbeelding img1.gif wordt geladen en krijgt de naam afbeelding. De volgende lijn code vervangt de oorspronkelijke afbeelding img1.gif door een nieuwe afbeelding img2.gif:
document.afbeelding.src= "img2.gif";
Deze nieuwe afbeelding neemt altijd de breedte en hoogte aan van de oorspronkelijke afbeelding. Het gebied waarin de afbeelding werd afgebeeld kunnen we niet aanpassen. We kunnen dit uitproberen met volgend voorbeeld (oplet dit werkt slechts eenmalig).
Een nadeel bij het wijzigen van een afbeelding is de tijd die nodig is om de nieuwe afbeelding in te laden na het toekennen van de nieuwe src property. Daar de nieuwe afbeelding niet wordt voorgeladen in het geheugen duurt het een tijdje alvorens de nieuwe afbeelding verschijnt. In sommige gevallen kan dit geen kwaad - maar soms is een zekere wachttijd niet acceptabel. Wat kunnen we daaraan doen ? De oplossing ligt hier in het vooraf laden van de afbeeldingen. Hiervoor moeten we een nieuw Image-object laden. Dit gebeurt als volgt:
hiddenImg= new Image(); hiddenImg.src= "img2.gif";De eerste regel creert een nieuw Image-object. De tweede lijn definieert de source van het nieuwe object hiddenImg. We hebben reeds eerder gezien dat het toekennen van een adres aan het src attribuut de browser forceert tot het laden van de afbeelding met dat adres. De afbeelding img2.gif wordt aldus geladen bij uitvoeren van de tweede regel. Hierbij wordt de afbeelding geladen in het geheugen (of beter de cache) van de browser voor later gebruik. Om de nieuwe afbeelding te tonen kunnen we volgende instructie uitvoeren:
document.afbeelding.src= hiddenImg.src;
Nu wordt de afbeelding uit de cache geladen en onmiddelijk getoond. De afbeelding werd vooraf geladen.
Natuurlijk moet de browser de tijd krijgen om alle afbeeldingen in de cache te laden opdat er een tijdswinst zou zijn bij het tonen van de afbeeldingen. Als we dus heel veel afbeeldingen gaan vooraf laden dan kan het wel eens voorkomen dat de browser moeite heeft om de afbeeldingen te tonen omdat hij nog altijd bezig is met het vooraf laden van de "hidden"-images. We moeten ook rekening houden met de 'snelheid' van het Internet - het laden van afbeeldingen blijft een tijdrovend zaak. Het enige wat we hier doen is het laden van afbeeldingen alvorens ze te tonen.
Als we over een snelle internetverbinding beschikken is dit allemaal van ondergeschikt belang. Een 33.6 modem of nog beter een 56K of ISDN helpen natuurlijk ook.
We kunnen knappe effecten realiseren door afbeeldingen te wijzigen als reactie op bepaalde events. We kunnen bijvoorbeeld afbeeldingen wijzigen wanneer de muiswijzer er overheen bewogen wordt. Laten we eerst het volgende voorbeeld bekijken (bij gebruik van een JavaScript 1.0 browser krijgen we een foutboodschap - we zullen later zien hou dit op te vangen).
De source code van dit voorbeeld:
<a href="#" onMouseOver="document.afbeelding2.src='img2.gif'" onMouseOut="document.afbeelding2.src='img1.gif'"> <img src="img1.gif" name="afbeelding2" width=160 height=50 border=0></a>Deze code kent enkele tekortkomingen:
Hier volgt de source code (ik heb wat commentaar toegevoegd):
<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers
// ok, we hebben een JavaScript browser
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- verbergen voor niet-Javascript browsers
// JavaScript 1.1 browser - nog beter!
browserOK = true;
pics = new Array();
// -->
</script>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers
var objCount = 0; // aantal (veranderlijke) afbeeldingen
function preload(name, first, second) {
// vooraf laden van de afbeeldingen in een array
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
// terugzetten van alle overige afbeeldingen
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// toon de tweede afbeeldingen wanneer de cursor passeert
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// terugzetten alle afbeeldingen
if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// vooraf laden afbeeldingen - hier specifieren we welke afbeeldingen we
// vooraf wensen te laden en tot welk Image-object op de webpagina
// ze toebehoren (dit is het eerste argument). Wijzig dit gedeelte van
// de code als we andere afbeeldingen wensen te gebruiken.
preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");
// -->
</script>
<head>
<body>
<a href="link1.htm" onMouseOver="on('link1')"
onMouseOut="off()">
<img name="link1" src="link1f.gif"
width="140" height="50" border="0"></a>
<a href="link2.htm" onMouseOver="on('link2')"
onMouseOut="off()">
<img name="link2" src="link2f.gif"
width="140" height="50" border="0"></a>
<a href="link3.htm" onMouseOver="on('link3')"
onMouseOut="off()">
<img name="link3" src="link3f.gif"
width="140" height="50" border="0"></a>
</body>
</html>
Dit script plaatst alle afbeeldingen in de array pics. De preload() functie die in het begin wordt opgeroepen bouwt de array op. We zien ook dat we de preload() functie als volgt oproepen:
preload("link1", "img1f.gif", "img1t.gif");
Dit betekent dat het script de twee afbeeldingen img1f.gif en img1t.gif moet vooraf laden. De eerste afbeelding is de afbeelding die getoond wordt wanneer de cursor zich niet boven de afbeelding bevindt. Wanneer de cursor over de afbeelding wordt bewogen moet afbeelding twee worden getoond. Met het eerste argument "link1" van de preload() functie-oproep specifieren we tot welk Image-object op de webpagina de twee voorafgeladen afbeeldingen behoren. Als we kijken in het <body> gedeelte van ons voorbeeld dan vinden we een afbeelding terug met de naam link1. We gebruiken dus de naam van de afbeelding (en niet zijn nummer) opdat we later de mogelijkheid zouden hebben de volgorde van de afbeeldingen te wijzigen in ons script.Afbeeldingen vormen zeker en vast de manier om onze webpagina aantrekkelijk te maken. Via het Image-object kunnen we allerlei speciale affecten realiseren. Doch niet elke afbeelding en Javascript programma dragen bij tot een betere webpagina. Als we surfen over het net dan zijn er zo talrijke voorbeelden van het slechts gebruik van afbeeldingen. Het is niet de kwantiteit van de afbeeldingen maar wel de kwaliteit die een goed webpagina maken. Verder is het tijdrovend en vervelend om 100 kB slechte afbeeldingen te downloaden. Hou dit in gedachten bij het maken van Uw volgende webpagina en de klanten/bezoekers zulllen vaker terugkomen.
| Site monitored
by  
webdesign by |
