Een funktie waar je heel leuke dingen mee kunt doen is de Imagemap. Een imagemap is een plaatje waarop de verschillende vlakken heb gedefinieerd die allemaal een link naar een ander document zijn. Je vindt er onder andere een op de introductiepagina van deze cursus.
We gaan de imagemap op de introductiepagina eens stap voor stap doornemen.
Om te beginnen definieren we een map:
<MAP>
</MAP>
Vervolgens geven we de map een naam:
<MAP NAME="keuze">
</MAP>
Nu gaan we de vlakken definieren die we kunnen aanklikken. Je kunt een rechthoek, een circel of een polygoon (=veelhoek) definieren. Voor de locatie van de vlakken gebruiken we coördinaten met als eenheid de
welbekende pixel. Voor de plaatsen van diverse coördinaten kijken we even naar de afbeelding hieronder.
Een korte uitleg is misschien wel op z'n plaats. Het plaatje is 500 pixels breed en 200 pixels hoog. Anders dan gebruikelijk staat de oorsprong (0,0) linksboven. De rechteronderhoek heeft dus als coördinaten (500,200).Als we het plaatje in vier gelijke vlakken verdelen worden dit de coördinaten:
Je kunt hier dus makkelijk uithalen welke coördinaten je de vier vlakken moet geven. Je hoeft alleen de coördinaten van de linkerbovenhoek en van de rechteronderhoek te geven. Die twee punten zijn genoeg om een rechthoek te tekenen.
Voor het definieren van polygonen geef je de coördinaten van alle punten op en voor circels geef je de coördinaten van het middelpunt en de straal in pixels op. We houden het hier even bij
rechthoeken, omdat je die het meest zult gebruiken.
We zullen bovenstaand verhaal eens omzetten in HTML code. We doen het stap voor stap....
Eerst definieren we een vlak.
<MAP NAME="keuze">
<AREA>
</MAP>
Geef als optie op welke vorm je het vlak wilt geven...
<MAP NAME="keuze">
<AREA SHAPE="RECT">
</MAP>
RECT staat natuurlijk voor RECTANGLE. Voor een cirkel gebruik je de optie CIRCLE en voor de polygoon gebruik je POLY.
De volgende optie bevat de coördinaten van de zojuist gedefinieerde rechthoek.
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100">
</MAP>
Je hebt nu dus twee punten opgegeven, te weten 0,0 en 250,100. Je kunt je coördinaten gewoon achter elkaar typen. De browser weet zelf dan wel dat het achereenvolgens om de x- en de y- coördinaten van de linkerbovenhoek en de x- en de y-coördinaten van de rechteronderhoek gaat.
De laatste optie die we moeten specificeren is het document waar het vlak naar toe moet verwijzen, de link dus.
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="index1.htm">
</MAP>
Nu kun je op dezelfde manier de overige drie vlakken definieren...
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="index1.htm">
<AREA SHAPE="RECT" COORDS="250,0,500,100" HREF="frames.htm">
<AREA SHAPE="RECT" COORDS="0,100,250,200" HREF="tables.htm">
<AREA SHAPE="RECT" COORDS="250,100,500,250" HREF="tags.htm">
</MAP>
Je hebt nu alle vlakken gedefinieerd maar we zien nog geen plaatje. Dat gaan we nu specificeren...
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="index1.htm">
<AREA SHAPE="RECT" COORDS="250,0,500,100" HREF="frames.htm">
<AREA SHAPE="RECT" COORDS="0,100,250,200" HREF="tables.htm">
<AREA SHAPE="RECT" COORDS="250,100,500,250" HREF="tags.htm">
</MAP>
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200>
We hebben nu een image en we hebben een map maar dat betekent nog niet dat je een imagemap hebt. We zijn dus duidelijk nog niet klaar met ons verhaal.We moeten nog even opgeven dat het plaatje de map moet gebruiken die we net gemaakt hebben.
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze">
Als je wilt kun je voor de volledigheid nog even het blauwe kader weghalen en je imagemap centeren...
<CENTER><IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze" BORDER=0></CENTER>
Dat was het, je hebt nu een imagemap gemaakt.
Als je je lezers vooraf duidelijk wilt maken dat het plaatje dat er aankomt een imagemap is kun je in de <IMG> tag de optie ALT="xxxxxxx" gebruiken.
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze" BORDER=0 ALT="Imagemap">
Je kunt deze optie trouwens altijd gebruiken om commentaar bij je plaatjes te zetten. Als de lezer dan met zijn muis over het plaatje gaat, kan hij dat commentaar lezen. Hij ziet het maar een paar seconden, dus citeer niet het hele boek als je alleen de omslag afbeeldt.
Als je met de muis over een imagemap met commentaar gaat zie je het
commentaar niet als je met de muis op een link staat. In het voorbeeld dat we net gemaakt hebben, hebben we het hele plaatje klikbaar gemaakt. Je zult dus alleen commmentaar kunnen lezen als het plaatje nog niet
geladen is. Als je dat bij de imagemap in de inleiding van de beginnerscursus probeert zie je dat tussen de links het commentaar verschijnt.
Maak je eigen Homepage!
Als je de drie cursussen hebt gevolgd heb je eigenlijk alle kennis die nodig is om de perfecte homepage te maken. Als je denkt dat dit alles is, zit je er echter goed naast. Er zijn nog veel meer tags waarmee je allemaal leuke dingen op je pagina kunt zetten. Wat dacht je bijvoorbeeld van een achtergrondmuziekje of een plaatje met meerdere links, zoals je op de introductiepagina van deze site ziet. Verder kun je nog een heleboel leuke dingen doen door in je homepage JavaScript code of Java-applets op te nemen.
Als je een 256-kleuren scherm hebt, dan neemt de computer de dichtsbijzijnde kleur en zet er een paar puntjes van een andere kleur doorheen zodat de kleur op het scherm lijkt op de oorspronkelijke kleur. Dit proces, dat we dithering noemen, ziet er echter niet zo mooi uit.