Meerdere links in één plaatje: <map>
Op sommige sites zie je wel eens een (meestal vrij grote) plaat waarop je kunt klikken. Afhankelijk van wáár je klikt wordt een andere link aangeroepen. Hier staat beschreven hoe je dat doet.
Op het .GIF-plaatje hieronder zie je diverse vormen. Elk ROOD gekleurd deel van het plaatje bevat een link waarmee je een pagina kunt oproepen op dezelfde manier zoals bij een <a href="..."> tag. Op deze pagina staat echter de aanroep van een JavaScript-function waardoor een alert wordt gegeven.
De code staat onderaan deze pagina. Je kunt hem ook downloadezn, inclusief het plaatje.
- Er bestaan twee soorten mappings:
- Server side mapping, dat wil zeggen: de verdeling van het .GIF-plaatje wordt door de server
geregeld. De img-tag krijgt het keyword ismap mee:
<img src="artwork.gif" ..... ismap>
Deze methode wordt hier niet besproken. - Client side mapping, dat wil zeggen: de verdeling van het .GIF-plaatje wordt door de browser
geregeld. De img-tag krijgt het keyword usemap mee, waarin wordt aangegeven waar de map te vinden is:
<img src="artwork.gif" ..... usemap="#EEN">
Deze methode wordt hier nader toegelicht.
- Server side mapping, dat wil zeggen: de verdeling van het .GIF-plaatje wordt door de server
geregeld. De img-tag krijgt het keyword ismap mee:
- Het keyword USEMAP verwijst naar een <map name="...">-tag in hetzelfde .HTML-bestand als waarin de <img>-tag staat gedefinieerd.
- Het is ook mogelijk de <map> in een ander bestand te zetten, bijvoorbeeld:
<img src="artwork.gif" ..... usemap="./anders.htm#EEN">
Ik raad dat niet aan. Het is nl. nu niet meer duidelijk in welke van de twee bestanden de JavaScripts staan die op het aanklikken van de <map> moeten reageren. - De gebieden in een <map> worden gedefinieerd door <area>-tags:
<area shape="..." coords="..." href="xxxx.htm">
name= Betekenis coords= rect Rechthoekig gebied xlinksboven, ylinksboven, xrechtsonder, yrechtsonder circle cirkelvormig gebied xmiddelpunt, ymiddelpunt, straal poly (onregelmatige) veelhoek xpunt 1, ypunt 1, xpunt 2, ypunt 2, xpunt 3, ypunt 3, enz. - Voor het bepalen van de coördinaten geldt:
- De coördinaten worden opgegeven in pixels (beeldpunten).
- De linker bovenhoek = (0,0), de x-as staat horizontaal naar rechts, de y-as staat verticaal naar beneden.
- De pagina die wordt geopend na een klik op een <area> geef je op achter de href=. Je kunt dezelfde attributen meegeven als in een normale anchor-tag (<a href="...">), zoals bijvoorbeeld target="...".
- href werkt relatief ten opzichte van het bestand waarin de <map>-tag staat. Houd hier rekening mee als de mapping-file zelf in een andere directory staat dan het bestand waarin de mapping wordt gebruikt!.
- In plaats van href kun je ook nohref opgeven. Er is dan geen actieve link. Het gebied is inactief.
- Voor het bepalen van de coördinaten heb je een tekenpakket nodig, waarmee je die gegevens kunt ophalen.
- Gebruik van usemap="..." in combinatie met onClick="..." in de tag van hetzelfde plaatje leidt er toe dat er twee acties worden gestart als je binnen de <area>'s klikt, nl. de actie uit de mapping en de acie uit onClick=. Als er buiten de <area>'s klikt wordt alleen de actie van onClick= gestart.
- Dit werkt met alle grafische formaten waar een browser mee overweg kan, dus o.a. met .GIF plaatjes, .PNG-plaatjes
en met .JPG-plaatjes.
- Opmerking:
Een nadeel van deze techniek is dat je in het plaatje niet direct kunt zien wat het "klikbare" (actieve) gebied is. Op een desktop of laptop computer zie je dat alleen aan de muis-aanwijzer, die verandert van een pijltje in een handje. Op een mobiel apparaat (ook als daar een muis aanhangt) zie je soms helemaal geen verschil.
Het item Meerdere links in een plaatje II: map met muis-effect, behandelt een uitbreiding van deze techniek, waarmee je de actieve gebieden wél zichtbaar kunt maken.
Gebruik:
- De code staat in de <BODY>.
- De JavaScript-functie staat in de <HEAD>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).(Zet dit in de <BODY>).<script">
function ZegHet(str) {
window.alert(str+' aangeklikt!');
}
</script>
<div align="center">
<img src="artwork.gif" width="400" height="160" border="2" alt="artwork.gif... Dit is kunst! © 2002 B. Boukes" usemap="#EEN">
</div>
<map name="EEN">
<area shape="rect"alt="Rechthoek" coords="124,82,164,108"
href="JavaScript:ZegHet('Rechthoek')">
<area shape="circle" alt="Cirkel" coords="246,23,14"
href="JavaScript:ZegHet('Cirkel')">
<area shape="poly"alt="Driehoek" coords="243,105,326,105,288,130"
href="JavaScript:ZegHet('Driehoek')">
</map>
Downloaden:
Druk op de knop:
File: voorb045.zip, 3177 bytes.
