U bent ongetwijfeld websites tegengekomen waarbij u navigeerde door op een stuk van een plaatje te klikken. Afhankelijk van op welke plek u klikte, kwam u dan bij een andere pagina terecht. Het ziet er fraai uit, en mits met mate gebruikt kan het ook bijdragen tot een heldere structuur. U kunt dit ook zelf voor elkaar boksen, ook met de minimale gereedschappen waarvan we ons hier bedienen. (Het is wat knutselen, geef ik grif toe...)
Een stukje techniek vooraf. Het werkt zo dat u in uw code een grafisch bestand opgeeft dat als "map" gebruikt wordt, en dat u specificeert welke stukkken daarvan als "relevant gebied" (clickable area, in het jargon ook "hotspot") moeten worden opgevat. En verder geeft u op wat het effect moet zijn van een klikken in dat gebied: het aanroepen van die-en-die pagina. U hebt drie manieren om een clickable area op te geven: als een rechthoek, als een cirkel of als een polygoon (veelhoek). U gebruikt hierbij de coördinaten van de pixels: de linkerbovenhoek heeft de coördinaten (1,1), die daarnaast (2,1) en zo verder.
Hoe komt u achter die coördinaten? Stel, u hebt een leuk plaatje (bijvoorbeeld de periodieke foto van de Koningin met het nieuw beëdigde kabinet), en u wilt van elke bewindsman/vrouw een pagina met een biografietje. De foto hebt u van de RVD gekregen, en omgebouwd tot een GIF- of JPG-bestand. Maar u moet dus weten welk stuk foto nu precies met welke persoon correspondeert. Hoe nu verder? Mogelijkheid A: de meeste beeldbewerkingsprogramma's laten, als u met de muis over een plaatje gaat, ergens onderaan zien waar u bent. Op de manier kunt u vaststellen dat de neus van de heer Balkenende zich op positie (115,83) bevindt. Mogelijkheid B: probeer er in elk geval achter te komen hoe groot het plaatje is, en ga dan net zo lang knutselen tot u de juiste positie hebt.
Een simpel voorbeeld: een plaatje met de bezienswaardigheden van Uithoorn. (Gaat u er nog niet gelijk op klikken, lees eerst even verder.)
Er zijn vier bezienswaardigheden aangegeven: de brandweer, het gemeentehuis, de Thamerkerk en de Amstel. De eerste drie gaan we een hotspot geven door het rode cirkeltje aldus te markeren, en de Amstel wordt een rechthoek. (De polygoon komt zo meteen, die is eigenlijk "meer van hetzelfde", maar ingewikkelder.) Het werk bestaat uit twee stappen: het opgeven en definiëren van de map en het invoegen van het plaatje.
Dit gebeurt hier met de tag "<MAP NAME="uithoorn"> ... </MAP>. De naam van de map is vrij, maar ik zou een heldere naam nemen, "cafes_in_amsterdam" of zo.
Dan de coördinaten. Het midden van het eerste cirkeltje (brandweer) bevindt zich op positie (30,69) (dus 30 pixels van links en 69 pixels van boven). Een cirkel met een straal van 6 pixels lijkt groot genoeg, anders wijzigen we het wel. We voegen tussen de MAP-tags de volgende code toe: "<AREA SHAPE="circle" COORDS="30,69,6" HREF="brandweer.html">. In normaal Nederlands staat hier dus: beschouw een cirkel met een straal van 6 pixels met als middelpunt die coördinaten (30,69) als een hotspot; indien erop geklikt wordt, roep dan de pagina "brandweer.html" aan.
Op dezelfde manier heb ik voor het gemeentehuis en de Thamerkerk cirkels als hotspots aangegeven.
Dan de rechthoek: we willen immers de complete Amstel als hotspot hebben. Hier is de instructie iets anders: we geven de linkerbovenhoek en rechterbenedenhoek als coördinaten op. De linkerbovenhoek van het gewenste gebied is op (236,1) en de rechterbenedenhoek is op (251,139). De code wordt dan: <AREA SHAPE="rechtangle" coords="236,1,251,139" HREF="amstel.html">.
De totale code op dit punt bestaat dus uit die <MAP NAME="naam_van_map"> ... </MAP>-tags, met daartussen even veel <AREA SHAPE= etc >-tags als er hotspots gedefinieerd zijn.
(Om nog even terug te keren tot het voorbeeld van Hare Majesteit en haar Kabinet: daar zoudt u dus heel goed als hotspot een aantal cirkels kunnen nemen, die ieder gezicht bestrijken. Hoeveel pixels die straal zou moeten zijn hangt uiteraard af van de omvang van uw foto.)
Logisch eigenlijk, maar het moet wel gebeuren. U moet de browser nog vertellen dat het plaatje als map gebruikt moet worden. Dat doen we met het attribuut "USEMAP" in de "IMG"-tag: de code wordt: <IMG SRC="uithoorn.jpg" USEMAP="#uithoorn">. Let u op het "hekje"!
Het bovenstaande heb ik dus bij deze pagina gedaan (zij het dat ik geen aparte pagina's "brandweer.html" etcetera gemaakt heb). Als u nu over het plaatje gaat, ziet u dat er inderdaad 4 links zijn aangebracht. (Als u dan op zo'n link klikt, krijgt u de mededeling dat die pagina niet gevonden wordt, hetgeen hier betekent dat de link in elk geval werkt...)
Voor de duidelijkheid: de code van de hier beschreven image-map ziet er als volgt uit:
<MAP NAME="uithoorn">
<AREA SHAPE="circle" COORDS="30,69,6" HREF="brandweer.html">
<AREA SHAPE="circle" COORDS="196,115,6" HREF="gemeentehuis.html">
<AREA SHAPE="circle" COORDS="225,22,6" HREF="thamerkerk.html">
<AREA SHAPE="rectangle" coords="236,1,251,139" HREF="amstel.html">
</MAP>
<IMG SRC="htmlcursus_uithoorn.jpg" USEMAP="#uithoorn">
Nou, en op die manier kunt u de meest schitterende image maps maken. Ik heb de indruk dat een browser het op prijs stelt dat eerst de "<MAP>...</MAP>"-instructies worden opgenomen en daarna het plaatje. Waarom dat zo is weet ik niet, maar ik zou het maar doen.
Een bewerkelijk maar soms nuttig ding: de polygoon. U trekt als het ware een geknikte lijn om het gewenste gebied heen, en u geeft de punten op waartussen die lijntjes getrokken worden. Stel dat we hier dat zouden willen doen door niet alleen het cirkeltje rond de Thamerkerk te markeren, maar ook het woord "Thamerkerk", dan zou dat dus een driehoek kunnen worden. (U zou het ook uit vijf hoeken kunnen opbouwen, dat is fraaier maar meer werk.) We beginnen met op te zoeken wat het punt is vlak links van de "T" van het woord Thamerkerk. Dat is (168,36), dan het punt vlak boven de cirkel (225,13) en tenslotte het punt vlak naast de "k": (237,38). De code wordt dan: <AREA SHAPE="poly" COORDS="168,36,225,13,237,38,168,36" HREF="thamerkerk.html">.
Op het eerste gezicht is dit een onoverzichtelijke cijferbrei. Wat er staat is niet meer dan: begin bij (168,36), trek een lijn naar (225,23), dan naar (237,38) en dan weer terug naar (168,36). (De laatste coördinaten moeten dus weer dezelfde zijn als de eerste, anders is het gebied niet volledig omsloten.) Het effect is dat het daardoor "omheinde" gebied als hotspot wordt aangemerkt.
Ik denk dat deze aanpak weliswaar bewerkelijk is, maar nuttig kan zijn indien bijvoorbeeld een landkaart in stukjes wordt opgedeeld. (Ik meen dat ik dit tegenkwam bij de pagina van de Nederlandse Vereniging van Makelaars.) Maar ik zou zo'n begrenzing niet al te precies maken, en proberen de grenzen van een povincie of zo toch terug te brengen tot vijf of zes coördinaten. (Als u per ongeluk een gebied door twee polygonen laat bestrijken, is het effect dat de eerst opgegeven polygoon wordt gehanteerd.)
Mocht u vrezen dat uw imagemap niet duidelijk genoeg is, dan kunt u binnen elke AREA-tag een verklarende tekst genereren met het attribuut TITLE="...". Er verschijnt dan, zodra de muis op dat gebied komt, de reeds in het hoofdstuk "Plaatjes" genoemde toelichtende tekst in beeld.
Tja, opdracht... Wat zal ik u nu eens laten doen. Ik zou zeggen: neemt u zelf een plaatje dat u leuk vindt, en maak daar een image-map van. Kijkt u eens of u er een cirkel, een rechthoek en een polygoon in kunt stoppen.
U kunt nu naar -voor gevorderden!- Cascading Style Sheets.