sitemap | terug naar het html4 / xhtml 1|0 referentie overzicht
Een uitgebreide demonstratie van het image-map gebeuren kan je vinden bij de highlight-map-area procedure. Op deze pagina gaat het wat "rustiger" toe. Als je met jouw muis over het plaatje heen gaat zal, als je bijvoorbeeld het rechter-raam raakt, de muis-pointer aangeven dat er iets klikbaar geworden is. In dit geval is het gewoon de link van deze pagina. Er zijn vele toepassingen te bedenken voor de image-map.
Hieronder de html-regels die er voor zorgen dat de image-map zijn hot-spots krijgt. Let er even op wat allemaal mogelijk is: circels, vierkanten en poly-lijnen. De coördinaten spreken voor zichzelf. Voor de circle is dat linker-positie, top-positie, en de diameter; voor de rectangle zijn dat de linker-positie, top-positie, rechter-positie, bodem-positie, en voor de poly-lijnen is elk paar (2 parameters) telkens een punt op een denkbeeldige lijn die uiteindelijk de vorm van de "poly" bepaalt. Het eerste getal geldt voor de horizontale positie, de tweede voor de verticale positie.
<div>
<img class="highlight_map_area" src="/javascripts/image-effects/highlight-map-area.jpg" usemap="#highlight-map-area" width="273" height="390" alt="" />
</div>
<map name="highlight-map-area">
<area href="/manuals/html/image-map.html" shape="circle" coords="115,49,40" />
<area href="/manuals/html/image-map.html" shape="rect" coords="153,0,229,176" />
<area href="/manuals/html/image-map.html" shape="poly" coords="157,235,250,232,247,333,138,336,139,302,162,263" />
<area href="/manuals/html/image-map.html" shape="poly" coords="38,237,122,236,120,300,114,316,94,340,43,342" />
</map>