Werken met afbeeldingen
Met JavaScript kun je een reeks afbeeldingen in je webpagina tot animatie maken door ze achtereenvolgens te tonen. Ook kun je aan afbeeldingen funcites koppelen die in werking treden als de afbeelding wordt aangewezen of als op de afbeelding wordt geklikt.
De basisprincipes van afbeeldingen
Afbeeldingsnaam van afbeelding
Een afbeelding in een webpagina is een apart bestand dat door middel van een afbeeldingstag aan het HTML-bestand van de pagina is gekoppeld. Wil je in je script met een afbeelding werken, dan moet je die afbeelding een naam geven met name
<img src="plaatje.gif" name="plaatje_naam">
Het standaardobject Image & het standaardobject images
Een afbeelding in een webpagina is in JavaScript vanzelf een standaardobject Image. Het standaardobject Image is een eigenschap van document. Alle afbeeldingen in een webpagina tezamen vormen het standaardobject images.
Het standaardobject images is opgeboud als een tabel; elke afbeelding krijgt dus een unieke index. Het standaardobject images is een eigenschap van document.
Het object Image maken
Je kunt in JavaScript zelf een object met al je afbeeldingen maken door met de opdracht new de objectdefenitie Image aan te roepen. Je krijgt de afzonderlijke afbeelding pas te zien als je hetm oproept (zie verder deze tutorial).
afbeeldingsnaam = new Image()
Van Image kun je de eigenschap src wijzigen. src is de plaats van de afbeelding, dus de bestandsnaam en eventueel het pad.
Verwijzen naar afbeeldingen
Je verwijst naar een afbeelding met document, images en de index van de afbeelding. Je verwijst dus naar de tweede afbeelding in je pagina met document.images[1].
In plaats van te verwijzen naar de afbeelding via index, kun je ook verwijzen met de afbeeldingsnaam. Dus verwijzing document.images[1].src="nieuwplaatje.gif" is hetzelfde als document.oudplaatje_naam.src="nieuwplaatje.gif" Als je een afbeelding in een formulier plaatst, verwijs je als volgt naar een eigenschap van de afbeelding; document.formuliernaam.afbeeldingsnaam.eigenschap.
Afbeelding vervangen door afbeelding
Omdat alle afbeeldingen vanzelf een tabel vormen, en je naar de afzonderlijke indexen kunt verwijzen, is het mogelijk achteraf een nieuw plaatje zetten op de plaats van een ander plaatje in de tabel images. Geef aan de naam van het vervangen plaatje een nieuwe waarde; document.images[1].src="nieuwplaatje.gif".
Dynamische afbeelding maken
Je kunt een afbeelding in je pagina dynamisch maken door een reeks afbeeldingen te koppelen aan een functie en de event handlers onMouseOver en onMouseOut te gebruiken. Afbeeldingen kun je koppelen aan functies door ze als hyperlink te defeniëren en dan aan het element A (hyperlink) het atribuut href met als waarde de functie te geven (zie vorige tutorial over Hyperlinks)
<HTML><HEAD><TITLE>Reageren op de muis!</TITLE>
<SCRIPT type="text/javascript">
imguit = new Image(); imguit.src = "img1.gif"
imgaan = new Image(); imgaan.src="img2.gif"
function actief() {document.images["plaatje"].src="img2.gif"}
function passief(){document.images["plaatje"].src="img1.gif"}
function alert() { alert("Je hebt op een dynamische afbeelding geklikt!")}
</SCRIPT></HEAD><BODY>
<A href="javascript:alert" onMouseOver="actief()" onMouseOut="passief()">
<IMG name="plaatje" SRC="img1.gif" border=0></A>
</BODY></HTML.
Met onMouseOver start je een functie die aan de eigenschap src van een object Image een nieuwe waarde toekent. Als je met de muis de afbeelding verlaat, wordt onMouseOut actief waarmee je met een functie de eerste waarde van src teruggeeft.
In het voorbeeld maak je twee objecten Image waarmee je de afbeeldingen img1.gif en img2.gif laadt. In de head zet je de objecten imguit en imgaan. De eigenschappen src van de objecten krijgen als waarde img1.gif en img2.gif.
Aan de afbeelding plaatje (src img1.gif) is de hyperlink met de functie alarm gekoppeld (in de hyperlink staan ook de event handlers onMouseOver en onMouseOUt).
Einde
Zo dan zijn we nu aan het einde gekomen van deze tutorial, enige vragen kun je aan mij stellen door mij een private message te sturen en als het echt belangrijk is vraag je maar voor mijn msn adres.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.38) 