logo
  Imagemaps
  Haarlem Den Haag 's-Hertogenbosch Maastricht Middelburg Utrecht Arnhem Zwolle Assen Leeuwarden Groningen Lelystad Texel nederland

Dit kan wel eens makklijk zijn om iets aan te wijzen. Stel, je hebt net zoals hier de kaart van Nederland met zijn provinciale hoofdsteden. Ga nou eens met je muis op zo'n rood stipje staan. Als je dan heel even wacht, dan verschijnt de naam van die stad. Je kan dan de bezoekers er op laten klikken zodat diegene op de site komt die over die stad gaat.
Hoe werkt het:

<map name="joufoto.jpg">
<area shape="circle" coords="125,163,5" href="#" ALT="tekst" TITLE="tekst"></map>
<img src="joufoto.jpg" alt="titel" width="100" height="100" border="0" usemap="#joufoto.jpg">

We gaan dit even 'ontleden', want ik kan begrijpen dat dit toch wel een beetje pittige stof is.

De eerste tag <map name="joufoto.jpg"> is eenvoudig want hier zet jij je foto in tussen die twee " in.

De volgende is al een heel stuk moeilijker en ook niet makkelijk uit te leggen, maar ik ga het toch proberen.
<area shape="circle" coords="125,163,5" href="#" ALT="tekst" TITLE="tekst">
Area shape circle is een cirkel. Hoe groot dat cirkeltje en waar hij moet staan zie je bij 'coords'. Daar staan drie getallen 125,163,5, de laatste (in dit geval 5) is de doorsnee van de cirkel in pixels.
De eerste 2 getallen (125 en 163) zijn de coördinaten waar het cirkeltje komt. 125 is de X-as (horizontaal) en 163 de Y-as (verticaal).
Je kan het min of meer zien als een soort schietschijf. Deze heeft ook een X en Y - as en je richt precies zo dat het onderwerp de Y en X - assen elkaar kruizen (in het rondje). Dit doe je ook met een foto en je muis 'schiet dan op die coördinaten.

Maar hoe kom je nou achter die coördinaten? Neem een goed tekenprogramma of photoshop, die kunnen die coördinaten laten zien als je met je muis op dat plekje gaat staan. Let wel: de foto of tekening mag qua grootte niet meer veranderd worden, dus wil je de maat veranderen doe dit dan van te voren. Voor de rest maakt het niet uit waar je hem op de site zet, de coördinaten blijven geldig voor die foto.
Wil je nou meer van die coördinaten neer zetten, dan herhaal je alleen deze tag:
<area shape="circle" coords="125,163,5" href="#" ALT="tekst" TITLE="tekst">

Deze zet je er dan gewoon onder met een andere coördinaat en tekst, bijvoorbeeld:
<area shape="circle" coords="100,200,5" href="#" ALT="stadje1" TITLE="stadje1">
<area shape="circle" coords="100,350,5" href="#" ALT="stadje2" TITLE="stadje2">

Katje KatjeJe kan ook een vierkantje (of rechthoek) gebruiken, de coördinaten gaan dan ietsjes anders.

<area shape="rect" coords="22,17,190,155" href="#" ALT="Katje" TITLE="Katje">

Je gebruikt dan niet circle, maar rect en je gebruikt maar 2 hoeken (hier 22,17 en 190,155). Het maakt niet uit welke hoe je neemt, als je dan maar een tegenovergestelde diagonale lijn neemt.

En dan hebben we er nog een en dat is polygon. Met een polygon kan je meer 'tekenen'. Een voorbeeld zie je hier van het gebouw (doet het niet is maar een voorbeeld). Dit is een stuk ingewikkelder, want elk hoekje zijn twee coördinatenpunten (de X en de Y - as), dus hoe meer hoekjes je hebt, hoe meer coördinaatpunten heb je. Het maakt niet uit of je nu met de klok mee gaat of tegen de klok in, als je maar dat rondje maakt. Ga maar eens op Texel staan. Het komt er dan zo uit te zien:

<area shape="polygon" coords="131,80, 128,76, 140,55, 146,64, 142,74" href="#" ALT="naam" TITLE="naam">.

Het maakt niet uit waar je de foto op de site zet, onder, boven, links of rechts, de coördinaten zijn alleen voor die foto geldig.

Deze imagemaps zijn heel goed voor als je een foto hebt van een aantal mensen. Als je dan met je muis op een gezicht gaat staan, dan krijg je te zien hoe hij/zij heet.

 
eind