A solution in programming is:
<BODY> xxx xxx xxx etc. xxx xxx xxx <MAP NAME="map1"> <AREA SHAPE=RECT COORDS="10,10,60,60" onMouseOver="window.status='Service Department'; return true;"> <AREA SHAPE=RECT COORDS="61,61,150,150" onMouseOver="window.status='Sales Department'; return true;"> <AREA SHAPE=RECT COORDS="151,151,200,200" onMouseOver="window.status='Information'; return true;"> </MAP> <IMG SRC="prikbord.jpg" USEMAP="#map1"> xxx etc. xxx xxx </BODY> </HTML>
Je ziet in dit voorbeeld dat de oplossing middels 'MAP' en 'AREA' gedaan is.
Het voorbeeld werkt helaas nog niet helemaal goed met Netscape, maar wel met Internet Explorer.
Het plaatje wordt vervolgens met 'IMG' als het ware achter dit coordinatenstelsel geplakt. Als je met de muis boven een regio komt zul je onder in beeld zien dat dat de browser de inklik-regio's herkent en visuele, leesbare feedback geeft.
Hier boven zijn dus drie regio's met de beroemde 'top,left,buttom,right'-constructie (uit de 'desktop'-wereld) vastgelegd, namelijk het rechthoekige gebied 10,10,60,60, daarna 61,61,150,150 en daarna het gebied 151,151,200,200 ('rectangles' genoemd, ook wel 'rects').
De feedback op bewegingen met de muis over deze rectangles is in dit voorbeeld nog niet 100 procent. Doe dat zelf beter.
Je ziet dus onder in de smalle balk van het browser-window ofwel 'Service Department' (bij het artikeltje over de iMac), ofwel 'Sales Department' (bij het het artikeltje met de foto van een man) ofwel 'Information' (bij bij het grote krantenartikel met de relatief grote foto) (alle drie links boven op het prikbord).
Enschede, 4 nov. 1999