Genbrug af MAP-informationer

Image Maps eller Klikbare billeder er den metode, der anvendes til at gøre forskellige dele af et billede til "hotspots". Det vil sige, klikkes på én del af billedet, stilles om til én webside, klikkes på en anden del af billedet, stilles om til en anden webside.

Teknikken er beskrevet i "Billeder på websider", der er et kapitel i bogen "Webdesign -illustreret håndbog". (2. udgave, Forlaget Globe, 2005)

I al korthed beror funktionaliteten i et klikbart billede på brugen af USEMAP-attributten i IMG-markøren, samt oprettelsen af et koordinatkort over billedet, omsluttet af MAP-markøren.

Et eksempel på et sådant koordinatkort ses herunder:


Når tingene ikke virker som forventet

Image Maps bruges oftest til indgangssider eller forsider. Der er derfor som regel kun brug for koordinatkortet på én side.

Derfor har vi vænnet os til at sætte MAP-markøren ind på den webside, hvor vort Image Map befinder sig.

Er du imidlertid begyndt at bruge den fabelagtige "Low Bandwidth Rollover", som jeg beskriver i en artikel herom (Båndbredde-billig rollover), har du imidlertid brug for at genanvende koordinatkortet på mange sider.

I i hvert fald én bog om HTML (HTML 4 Unleashed, 1. udgave) mere end antydes det, at syntaksen for IMG-markøren i sådanne tilfælde kan være

<IMG SRC="billede.jpg" WIDTH="320" 
HEIGHT="240" ALT="Billedforklaring" 
USEMAP="MAP.HTM#hotspots">

Dette skal forstås således, at den aktuelle MAP-markør, indeholdende koordinatkortet, er indsat på websiden MAP.HTM med et navn (NAME) "hotspots". Teorien er, at dette name er et anker (bogmærke). Det, der kan forlede os til at tro det, er dobbeltkrydset (#) i USEMAP-referencen.

Den holder ikke!

Dels er det ikke specificeret således i HTML-specifikationerne og dels virker det ganske enkelt ikke.

Målet nås ad en anden vej

Det betyder dog ikke, at vi er henvist til bevidstløst at kopiere vort koordinatkort til hver eneste af de websider, der skal bruge.

Du kan indsætte det på en webside fra et eksternt JavaScript, f.eks. således:

<script language="JavaScript" src="map.js" 
-->	type="text/javascript"></script>

Jeg kalder denne teknik for "JavaScript-genereret HTML".

Idéen er den enkle, at noget HTML, der skal gentages på flere sider, med fordel kan "importeres" til siderne via et JavaScript. Dette script indeholder så et antal document.write-metoder, der skriver den ønskede HTML-kode med det ønskede indhold.

I det eksempel, der er anvendt her, ser denne JavaScript-fils indhold såldes ud:


Som det ses, er den HTML, der er tale om, fuldstændig identisk med den HTML, vi normalt ville anvende. Der er dog sket den ændring, at de dobbelte anførselstegn er ændret til enkelte anførseltegn. De dobbelte er om man så må sige "brugt op" af JavaScript-koden.

Senest opdateret: 11. juni 2003.