Image Maps
Image maps maken met HTML is moeilijk
Je kunt je de image map voorstellen als een soort raster dat over de
afbeelding wordt gelegd. HTML biedt van huis uit drie geometrische vormen waarmee
je gevoelige gebieden kunt omschrijven, en die dan als link kunnen worden gebruikt:
• rechthoek (SHAPE="rect")
• cirkel (SHAPE="circle")
• veelhoek (SHAPE="polygon")
Voor deze workshop maak je eerst een driedimensionale knop in een beeldbewerkings-
of tekenprogramma zoals Paint Shop Pro of Photoshop. Het driedimensionale effect
bereik je door embossing toe te passen. Werk met layers want dan kun je de tekst
op de knoppen naar wens makkelijk wijzigen als je bijvoorbeeld meerdere knoppen
nodig hebt.
Voor elk type figuur moet je opgeven waar de hoekpunten liggen, en voor de cirkel
het middelpunt en de radius aangeven. De oorsprong (0,0) voor de opgave van coördinaten
op de x- en y-as ligt in de linkerbovenhoek. Het beste kun je de afbeelding laden
in een teken programma en met de muisaanwijzer de coördinaten laten aangeven,
zodat u de nodige getallen over kunt schrijven.
Voor de hierboven gebruikte control resulteert dat bijvoorbeeld in de volgende
getalwaarden, die twee rechthoeken beschrijven met behulp van de diagonaal tegenover
elkaar liggende hoeken:
| Knop |
x links boven |
y links boven |
x rechts onder |
y rechts onder |
| Webdesign |
18 |
10 |
118 |
29 |
| Informatie |
131 |
10 |
231 |
29 |
Zo maakt u sneller image maps
Vooral bij grote en ingewikkelde afbeeldingen die veel gebieden met verwijzingen
in de image map moeten bevatten, betekent het uitzoeken van alle coördinaten
en de omzetting naar HTML zeer veel werk, en is ook daarom nog eens extra foutgevoelig.
Gelukkig bestaan er voor de webdesigner talloze programma's die helpen bij de
samenstelling van een image map. Met de WYSIWYG-editor Dreamweaver kunt u bijvoorbeeld
heel eenvoudig image maps maken:
- Maak een nieuwe webpagina en voeg met Insert>Image de gewenste afbeelding
in.
- Activeer eventueel de optie View/Invisible Elements, om de bijbehorende
knoppenbalk weer te laten geven.
Let op dat de ingevoegde afbeelding geselecteerd is - zo niet, klik dan eenmaal
op de
afbeelding - en klik vervolgens op de knop Map op de knoppenbalk.
- In de Image Map Editor kun je nu de linkgevoelige gebieden intekenen als
was het in een tekenprogramma:
Selecteer een vorm en omlijn het gewenste gebied. Met het pijlgereedschap
kun je de gemaakte gebieden achteraf nog selecteren en verplaatsen of met
[Del] verwijderen.
In het veld Alt kun je de tiptekst invoeren voor elk gebied, en bij Link klik
je op het mapsymbool om het verwijsdoel aan te wijzen.
- Als je alle gebieden klaar hebt, is de HTML -code beschikbaar. Ofwel maak
je nu de rest van de pagina ook met Dreamweaver, of je roept met Window/HTML
de codeweergave op en kopieer je het hele <MAP>-gebied om dit in een
andere editor te kunnen plakken.
Klik nu op de control op "Informatie" om de handmatige HTML invoer te bekijken.
Naar boven