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 "circle" 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" /><map name="mapnaam"> ... </map>
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 het attribuut coords. Onze linkerbovenhoek is (0,0) en onze rechteronderhoek is (80,40).
Het element area plaats je binnen het map element.
<area shape="rect" coords="0,0,80,40" href="link-voor-vierkant.php" alt="Dit is een rechthoek" />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).
Het element area plaats je binnen het map element.
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" />Het element area plaats je binnen het map element.