Afbeeldingen
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
1. Inleiding
2. Type afbeeldingen
2.1 Lijst van type afbeeldingen
2.2 Wanneer welk type gebruiken
3. Afbeeldingen plaatsen
3.1 HTML code
3.2 Attributen
4. Image map
4.1 Vierkant
4.2 Cirkel
4.3 Veelhoek
4.4 Resultaat
1. Inleiding
Wanneer je een site hebt, wil je hem natuurlijk wel zo mooi mogelijk hebben. Wanneer je nog maar net begint met HTML dan heb je nog geen idee van de mogelijkheden en valkuilen met afbeeldingen. Daarom bied deze tutorial de mogelijk om meer te begrijpen hoe afbeeldingen werken in HTML.
 top
2. type afbeeldingen
Er zijn verschillende type afbeeldingen. Elke afbeelding heeft zijn eigen specifieke kenmerk. Let erop waarvoor je de afbeelding gaat gebruiken, want je wilt natuurlijk wel het optimale uit je afbeelding en site halen!
» 2.1 Lijst van type afbeeldingen
- GIF
- (Graphics Interchange Format)
GIF wordt meestal gebruikt bij kleinere afbeeldingen, zoals bepaalde knoppen, opsommigen en logo's. Het maximale aantal kleuren is 256.
- JPEG
- (Joint Photographic Expert Group)
JPEG/JPG is een type dat geschikt is voor ondermeer foto's en fotografische logo's. Het maximale aantal kleuren loopt op tot in de miljoenen. Helaas ondersteunt dit type geen transparantie.
- PNG
- (Portable Network Graphics)
Wanneer je een combinatie van GIF en JPEG wilt, dan biedt PNG de uitkomst. Je kunt nu foto's met miljoenen kleuren van transparantie voorzien. het nadeel is echter dat PNG niet door alle browsers wordt ondersteunt.
- SWF
- (ShockWave Flash)
SWF is niet echt een afbeeldingtype, maar hoort wel in dit rijtje thuis. De laatste jaren zie je steeds meer 'flashy' afbeeldingen op het web. Zelfs complete intro's zijn er mee gemaakt. Met een SWF (gemaakt met het programma Flash, of een iets eenvoudigere variant; Swish) kan je bewegend afbeeldingen maken. Nu zal je zeggen, dat kan met GIF ook, maar SWF is toch weer anders, omdat je er complete websites mee kan maken. Voor meer informatie wil ik jullie verwijzen naar Flashfocus
- BMP
- (BitMaP)
Het oudste bestandstype is BMP, wat bij Windows hoort. Je allereerste afbeelding die je ooit gemaakt hebt, is hoogstwaarschijnlijk gemaakt in Paint en was van het type BMP Dit ype heeft één groot nadeel: het kent geen compressie. Daarom worden deze afbeeldingen soms wel meer dan één MB groot, wat veel te groot is voor een afbeelding.
» 2.2 Wanneer welk type gebruiken
Wanneer je afbeeldingen voor op je website wilt gaan maken, moet je nagaan waarvoor je de afbeelding wilt gaan gebruiken. Wordt het een logo, een knop, een banner of een intro? Voor al deze doeleinden zijn er andere afbeeldingstypen (zie 2.1). Om je wat uitleg te geven gebruik ik deze site hiervoor (Sitemasters)
Als je op de pagina komt, valt als eerste de header op. Die staat helemaal bovenin de site met het logo erin verwerkt. Je zien dat er heel veel kleuren zijn gebruikt, maar voornamelijk blauw. Zoveel tinten blauw zijn niet ze vinden in het afbeeldingstype GIFDeze valt al af. Omdat het geen 'flashy' header is, hoeven we ook geen SWF te gebruiken. We hebben nu twee keuzes: JPEG of PNG. We willen dat de site zo mooi mogelijk wordt voor alle gebruikers, en dus ook alle browsers. Daarom valt PNG af. Daarom is voor de header gekozen voor JPEG
Als je hier naar links kijkt zie je een blauwe menubalk. Deze hoeft maar 1 pixel breed te zijn. Daarom wordt het een kleine afbeelding. Er zijn niet zoveel kleuren gebruikt. Daarom is er voor die kleine afbeeldingen GIF gebruikt.
top
3. Afbeeldingen plaatsen
Om afbeeldingen op je site te plaatsen, kunnen we gewoon gebruik maken van HTML. Je kunt nog verschillende voorwaarden stellen op de manier waarop je afbeelding wordt weergegeven.
» 3.1 HTML code
Om een normale afbeelding te plaatsen maken we gebruik van de IMG tag. Deze zorgt ervoor dat de computer weet dat er een afbeelding aankomt. Nu een paar voorbeelden met de resultaten eronder
|
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif">
|
Resultaat: 
De afbeelding wordt nu weergegeven. Je ziet dat 'SRC' ervoor zorgt dat de computer de locatie van de afbeelding weet.
|
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="Dit is de Nederlandse vlag">
|
Resultaat:
Wanneer je nu over de afbeelding gaat, zul je de tekst "De Nederlandse vlag" zien. Dit wordt aangegeven met ALT
|
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" Width="25" HEIGHT="20">
|
Resultaat:
Je ziet dat je de breedte en de hoogte van de afbeelding ook kunt bijstellen. Dit kan nuttig zijn wanneer een afbeelding groter dan het scherm is. Nieuwere browsers passen de afbeelding zelf aan.
|
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" BORDER="2">
|
Resultaat:
In sommige browsers wordt er weleens een 'border' (rand) om de afbeeling geplaatst. Deze kun je uitzetten door als borderwaarde '0' te nemen. je kan de border ook dikker maken zoals in het voorbeeld
|
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" ALIGN=RIGHT>
|
Resultaat:
Je kunt een afbeelding net als teksten ook uitlijnen. Geldige waardes zijn 'left', 'center' en 'right'
|
<A HREF="http://www.sitemasters.be">
<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" BORDER="0">
</A>
|
Resultaat:
Je ziet dat je ook afbeeldingen naar een andere pagina kan laten linken. Dit gaat dus hetzelfde als met gewone links.
» 3.2 Attributen
De volgende attributen zijn beschikbaar voor de IMG tag
|
ALIGN |
De uitlijning van een afbeelding wordt hiermee bepaald. Geldige waardes zijn left, center en right
|
|
ALT
|
De tekst die wordt weergegeven wanneer de gebruiker met de muis over de afbeelding gaat.
|
|
BORDER
|
Dit bepaalt de dikte van de rand van de afbeelding. Voor geen rand moet je 'o' als border gebruiken
|
|
HEIGHT
|
Hiermee wordt de hoogte van de afbeelding bepaald.
|
|
WIDTH
|
Hiermee wordt de breedte van de afbeelding bepaald.
|
|
HSPACE
|
De witruimte (in pixels) links en rechts van de afbeelding
|
|
VSPACE
|
De witruimte (in pixels) boven en onder van de afbeelding
|
|
SRC
|
De lokatie van de afbeelding
|
|
USEMAP
|
Verwijzing naar de coördinaten in een image map
|
top
4. Image map
Wanneer je meerdere links in één afbeelding wilt plaatsen, dan moet je een image map maken van je afbeelding. Je geeft dan de coördinaten van je link door. Dit kan bijvoorbeeld erg handig zijn wanneer je een landkaart hebt en je wilt dat wanneer je op een plaats klikt, er een nieuwe pagina over die plaats wordt geopend.
Coördinaten zijn het aantal pixels gezien vanuit de linkerbovenhoek. De horizontale (_) as is de x-as en de verticale (|) as is de y-as. Wiskundigen (of mensen die op school zitten) weten dat natuurlijk al. Er zijn verschillende programma'tjes of javascripts die de coördinaten kunnen opzoeken voor je
Er zijn 3 mogelijkheden voor imagemaps. je kunt een vierkant (rect), een cirkel (cirle) en een veelhoek (poly) gebruiken om je links te definieren.
je moet eerste weer de afbeelding op het scherm laten verschijnen, maar dit keer maken we gebruik van USEMAP. Daarmee geven we een naam aan de image map. Zorg wel dat die naam altijd begint met een #. Wanneer je dit gedaan hebt en je wilt de links gaan geven, open je een MAP tag. Hierin zet je bij de NAME de naam die je je image map eerder gegeven hebt, maar dit keer zonder #
|
<IMG SRC="afbeelding.gif" ALT="Mijn image map" USEMAP="#mapnaam">
|
» 4.1 Vierkant
Wanneer we de link in de vorm van een vierkant (rect) willen hebben, dan hebben we de coördinaten van de linkerbovenhoek (x,y) en de rechteronderhoek (x,y) nodig. Deze plaats je achter elkaar in COORDS. Onze linkerbovenhoek is (0,0) en onze rechteronderhoek is (80,40).
|
<AREA SHAPE="rect" COORDS="0,0,80,40" HREF="link-voor-vierkant.php" ALT="Dit is een rechthoek">
|
» 4.2 Cirkel
Bij een cirkel hebben we maar 3 coördinaten nodig; het x-coördinaat van het middelpunt, het y-coördinaat van het middelpunt, en de straal (afstand van middelpunt tot de rand, in pixels). Onze middelpunt ligt op (120,80) en de straal is 40px (de doorsnede is dus 80 voor degenen die het niet snappen).
|
<AREA SHAPE="circ" COORDS="120,80,40" HREF="link-voor-cirkel.php" ALT="Dit is een cirkel">
|
» 4.3 Veelhoek
Bij een veelhoek geef je altijd een coördinatenpaar op. Je gaat langs de omtrek en neemt bij elke hoek die je maakt de x en de y. Je hebt dus altijd een even aantal coördinaten. Zorg wel dat de laatste coördinaat weer op de eerste aansluit, zodat je een gesloten link hebt.
|
<AREA SHAPE="poly" COORDS="160,0,160,40,200,40,200,120,240,120,240,0"
HREF="link-voor-veelhoek.php" ALT="Dit is een veelhoek">
|
» 4.4 Resultaat
|
<IMG SRC="afbeelding.gif" ALT="mijn image map" USEMAP="#voorbeeld" BORDER="0">
<MAP NAME="voorbeeld">
<AREA SHAPE="rect" COORDS="0,0,80,40" HREF="link-voor-vierkant.php" ALT="Dit is een rechthoek">
<AREA SHAPE="circ" COORDS="120,80,40" HREF="link-voor-cirkel.php" ALT="Dit is een cirkel">
<AREA SHAPE="poly" COORDS="160,0,160,40,200,40,200,120,240,120,240,0" HREF="link-voor-veelhoek.php" ALT="Dit is een veelhoek">
</MAP>
|
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
