Imagemaps

Vanligtvis länkas två olika dokument med hjälp av ett ankare <A></A>, t ex <A HREF="dok1.html">Text</A>. Länken visas då som en understruken text (textlänk). När du klickar på det understrukna ordet kommer du att förflyttas till ett dokument som heter dok1.html. Denna text kan bytas ut mot en bild (grafisk länk), t ex <A HREF="dok1.html"><IMG SRC="bild.gif"></A> och du klickar på bilden istället för ordet för att komma till dokumentet dok1.html.

För att länka ett antal olika dokument till en och samma sida, för att t ex skapa en innehållsförteckning över en sajt eller ett navigeringsredskap använder du dig av följande metoder: 1) du skapar så många textlänkar som det finns dokument som ska länkas till den aktuella sidan, 2) du skapar lika många grafiska länkar, 3) du skapar en klickbar bild (eng. imagemap).

Klickbara bilder eller aktiva bilder är helt vanliga bilder som delas upp i mindre ytor och länkas med var sitt dokument. När du klickar på en aktiv del kommer det dokument som är länkat till den att laddas. För att aktivera bilden sammankopplar du den med en s.k. mapfil som innehåller information om de olika bilddelarna och namn på dokumenten som ska laddas. Om bilddelarna överlappar varandra aktiveras den bild som först specificerades.

De tre metoderna skiljer sig från varandra dels visuellt dels i laddningstid. Textlänkar är helt plattformsoberoende och tar knappt någon tid att ladda. Grafiska länkar innehåller bilder som kan ta lång tid att ladda om bilderna är stora i kB räknat. Dessutom syns inte bilderna i textbaserade eller andra ej visuella www-klienter samt grafiska klienter med bildfunktionen avstängd. Därför borde du alltid ange alternativ text till bilden, t ex:

<A HREF="dok1.html"><IMG SRC="bild.gif" ALT="Den alternativa texten"></A>.

Klickbara bilder i likhet med grafiska länkar är också ett visuellt redskap och som sådant plattformsberoende. Även här beror nedladdningstiden på bildens storlek. En imagemap innehåller bara länkar till andra dokument därför bor du undvika stora bilder med långa nedladdningstider som omöjliggör en snabb bläddring samt alltid ange även vanliga textlänkar som alternativ.

Det behövs inga större kunskaper för att skapa klickbara bilder. Det hela går ut på att genom att räkna ut koordinaterna, dvs de yttersta punkterna av den yta som bilddelarna upptar beräkna bildelens yta och slutligen länka varje bilddel till ett dokument.

Det kan du göra på två sätt. Du kan antingen skaffa dig en map editor som gör hela jobbet åt dig eller göra allt själv. Map editor för:

• Unix Map Edit http://www.boutell.com/mapedit/
• Om du gör det själv behöver du ett ritprogram, t ex Paint Shop Pro http://www.jasc.com/, där du på statusraden läser av koordinaterna efter att ha först markerat bilddelarna.

Det finns två typer av klickbara bilder:

• client side imagemap som sköts av www-klienten, dvs när användaren klickar på den aktiva delen tolkar klienten koordinaterna och väljer samt följer en länk som specificerades för den aktuella delen
• server side imagemap som sköts av servern, dvs när användaren klickar på den aktiva delen skickas koordinaterna till servern där de tolkas enligt hänvisningar specificerade i elementet A, eller rättare sagt dess attribut HREF

Båda mapar har sina nackdelar och fördelar. En kombination av båda är den bästa lösningen.

En client side imagemap är innehåll av inlineelementet MAP. Elementets början markeras med starttaggen <MAP> och slut med </MAP>. Båda är obligatoriska.

För att kunna koppla mapen med bilden måste du först namnge den med ett unikt namn (varje MAP måste ha eget namn), t ex <MAP NAME=toolbar> och sedan associera MAPen med bilden genom att anropa mapens namn via attributet USEMAP. Detta attribut kan tilldelas elementen IMG, OBJECT eller INPUT som aktiverar bilden. För att länka mapen med IMG eller OBJECT skriver du:

Observera att anropet (USEMAPs värde) börjas med en stege # som följs av samma namn med vilket elementet MAP namnges samt att värdet måste citeras.

MAP är behållare för elementet(n) AREA i vilka bilddelarna (COORDS) och till dem associerade filer (HREF) specificeras eller valfritt blockelement innehållande elementet A med attributen COORDS och HREF. Notera att MAP är inlineelement som kan innehålla blockelement.

Då innehåll av MAP/AREA är osynligt på skärmen måste den alternativa texten uppges - attributet ALT. Innehåll av MAP/block/A är däremot synligt, därför föredras denna motod när tillgängliga-åt-alla-dokument ska skapas. Denna metod får ej stöd i HTML 3.2 som enbart tillåter AREA inuti MAP.

Inline elementet AREA används för att länka bilddelarna med dokumenten. AREA för endast finnas inuti MAP och markeras med <AREA>. Det är är ett tomt element och saknar sluttagg. Elementet MAP och dess innehåll - AREA, kallas för MAPinformation eller MAPdeklaration.

MAPdeklarationen placerar du var som helst i dokumentet (om den ska inte gömmas i OBJECT, dvs), anropet däremot (själva bilden) måste finnas på det ställe där du vill ha bilden.

Stegvisa instruktioner

MAP/AREA

I exemplet nedan ska vi dela upp bilden toolbar.gif i två delar; YTA 1 (vänster vinge) som senare ska länkas till en fil som heter dok1.html och YTA 2 (höger vinge) som ska länkas till dok2.html. OBS! Bilden bör helst vara i .gif eller .jpg format (än så länge).

toolbar.gif

Markera YTA 1 med ett lämpligt redskap. Redskapet kan ha form (SHAPE) av en rektangel (RECT), polygon (POLY) eller en cirkel (CIRCLE). I vårt exempel ska bilden delas upp i två rektangulära delar.

Nästa steg är att räkna ut hur stor yta (AREA) denna bilddel upptar. För att göra det måste du hitta läge på ytans yttersta punkter, dvs koordinaterna (COORDS). Ytans yttersta punkter är punkterna a, b, c och d (OBS! anges i den här ordningen). En map editor gör alla beräkningar själv men om du använder ett ritprogram kan du lätt hitta koordinatorerna genom att ställa markören på varje punkt och läsa av deras läge på statusraden. I exemplet är koordinatorernas läge 23,29,125,73. Koordinaterna kommer parvis. Först de övre (a, b) och sedan de nedre (c, d). Paren separeras med ett komma.

Nu är ytan på den första aktiva delen uträknad och du kan skriva ner en följande information: <AREA SHAPE="RECT" COORDS="23,29,125,73">. Det betyder att bilddelens yta (AREA) har en form (SHAPE) som är rektangulär (RECT) och vars yttersta punkter (COORDS) är 23, 29, 125, 73 bildpunkter i förhållande till hela bilden.

Vidare anger du adressen till det dokument (dok1.html) som ska laddas när en användare klickar på denna del, dvs HREF="dok1.html".

Slutligen skriver du alternativ text ALT="Text" för att göra länkarna läsbara även i icke grafiska bläddrade. OBS! Detta attribut obligatoriskt.

Information om den första bilddelen och dokumentet kommer att se ut så här:

<AREA SHAPE="RECT" COORDS="23,29,125,73" HREF="dok1.html" ALT="Den alternativa obligatoriska texten">.

Precis på samma sätt samlar du information om YTA 2 (e, f, g, h) och dokument dok2.html.

<AREA SHAPE="RECT" COORDS="129,29,231,72" HREF="dok2.html" ALT="Den obligatoriska alternativa texten">.

Listan avslutas med en s.k. default fil (ej HTML 3.2), dvs ett valfritt dokument som ska laddas ifall användaren missade de aktiva områdena. Om du inte vill att något annat dokument ska laddas anger du adressen till den aktuella sidan.

<AREA SHAPE="default" HREF="någon_eller_samma_fil.html" ALT="Den obligatoriska alternativa texten">

Genom att inte tilldela någon fil till bilddelen kan du skapa områden som inte är aktiva. Du kan även använda attributet NOHREF specificera att filen är inte tilldelad.

Nu kan du testa map:en. Då den aktiveras av www-klienten kan du göra det lokalt utan att behöva ladda dokumentet till servern.

MAP/blockelement/A

OBS! Ej HTMl 3.2. Denna map skapar du på samma sätt som den ovan nämnda då det gäller elementet MAP, bildbehandlingen och MAP-bild uppkopplingen. Istället för elementet AREA använder du elementet A som måste finnas i något blockelement, t ex P. Coordinaterna (COORDS) och associerade länkarna (HREF) specificerar du i elementet A. Länkarna kommer att vara synliga på skärmen.

Attribut i MAP

HTML 4.0 och HTML 4.0 Transitional	HTML 3.2
Alla attribut som beskrivs i %attrs; och NAME (obligatoriskt)	NAME

NAME

Attributet namnger en imagemap. Finns fler än en imagemap i ett dokument måste var och en har ett unikt namn. Detta namn skapar en länk mellan MAP-deklarationen och bilden som infogas med elementen IMG, OBJECT eller INPUT.

Attribut i AREA

HTML 4.0	HTML 4.0 Transitional	HTML 3.2
Alla attribut som beskrivs i %attrs;och SHAPE, COORDS, HREF, NOHREF, ALT (obligatoriskt), TABINDEX, ACCESSKEY, onfocus, onblur	Samma attribut som i HTML 4.0 och TARGET	SHAPE, COORDS, HREF, NOHREF, ALT

SHAPE

Attributet specificerar någon form på den aktiva delen. Tillåtna värden är:

• default - specificerar hela delen (finns ej i HTML 3.2)
• rect - specificerar en rektangel
• circle - specificerar en cirkel
• poly - specificerar en polygon

COORDS

Specificerar yttersta punkter av de i SHAPE angivna delarna. Värdet uppges i pixlar eller procent. Enskilda koordinater separeras med ett komma. Deras antal och följd beror på bilddelens form (SHAPE).

• rect - vänster-x, övre-y, höger-x, nedre-y
• circle - center-x, center-y, radius
• poly - x1, y1, x2, y2, ..., xN, yN

HREF

Värdet att detta attribut är en URL, dvs address där filen/dokumentet som ska associeras med den aktuella bilddelen befinner sig.

NOHREF

Det är ett boolean attribut vars värde är samma som attributets namn och behöver inte uppges. Nohref talar om att den aktuella bilddelen är inte associerad med någon fil.

ALT

Detta obligatoriska attribut används för att förse www-klienter som inte kan visa bilden med ett innehåll. Värdet är vanlig text som visas istället för bilden.

onfocus

Detta attribut är en s.k. inre händelse. Något sker efter det att www-klienten har laddat dokumentet. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

onblur

Detta attribut är en s.k. inre händelse. Något sker när elementet är inte längre i fokus t ex genom pekdonet eller navigeringstabbar. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

TARGET

Nedskrivet attribut. Används för att specificera i vilken ram det aktuella dokumentet ska laddas. Tillåtna värden är:

• TARGET="namn" - dokumentet laddas i den ram som tilldelades detta namn i elementet FRAME. Om sådant inte finns är skapar www-klienten en ram med detta namn
• TARGET="_blank" - dokumentet laddas i en ny, icke namngiven ram
• TARGET="_self" - dokumentet laddas i samma ram som det befintliga dokumentet finns i
• TARGET="_parent" - dokumentet laddas i det FRAMESET som är förälder till den aktuella ramen. Om sådant inte finns är värdet lika med "_self"
• TARGET="_top" - dokumentet laddas i ett nytt fönster utan ramar

Pros / cons

NACKDELAR:

Stöds inte av alla www-klienter. Trots att det är tillåtet kan inte mapinformationen finnas i en separat fil som kan kopplas till olika dokument utan måste finnas i själva dokumentet.

FÖRDELAR:

Arbetar lokalt, dvs utan andra tilläggsprogram. Länkarna är synliga i textbaserade browsers eller när bildfunktionen är avstängd samt ger information om pekdonet finns över en aktiv del eller inte.

Server map skapar du precis på samma sätt som client map. Den enda skillnaden samt den största fördelen är att själva mapinformationen skrivs i en separat fil som kan kopplas till hur många dokument som helst. Mapen kan endast associeras med elementen IMG or INPUT (EJ object). Om INPUT används måste elementet tilldelas attributet/värdet TYPE=image.

Filen börjar du med att ange formatet på det imagemap programmet, NCSA eller CERN, som ska aktivera bilden. Normalt finns båda två på servern. Sedan listar du de olika bilddelarna och associerar filer med dem. AREA och HREF behövs inte då de båda är specifika för cilent maps. Koordinatparen separerar du med ett mellanslag och inte komma.

RECT dok1.html 23,29 125,73.

Namnge filen enligt eget tycke men tillägget måste vara .map, t ex toolbar.map. Var filen ska ligga beror på serverns konfiguration. Du kan antingen ha den i vilket bibliotek som helst eller i eget cgi-bibliotek. Fråga din leverantör.

Bilden sammankopplar du med filen genom en vanlig bildlänk. Den enda skillnaden är att den måste innehålla ISMAP attributet. Det är just det attribut som åtskiljer vanliga bilder från aktiva bilder som används i server map:ar.

För att länka bilden med mapfilen skriver du i dokumentet:

<A HREF="toolbar.map"><IMG SRC="toolbar.gif" ISMAP WIDTH=n HEIGHT=n ALT="Text"></A>

Filen kan se ut så här:

toolbar.map

#$FORMAT:NCSA rect dok1.html 23,29 125,73 rect dok2.htm 129,29 231,72 default någon_eller_samma_fil.html

Pros / cons

NACKDELAR:

Map:en är beroende av servern och imagemap-programmet som finns där. Varje gång du klickar på en aktiv del måste anslutningen till servern etableras på nytt för att exekvera programmet. Det är även orsaken till att server map:ar inte kan testas lokalt. Den största nackdelen är dock att länkarnas namn inte kan ses. Det gör att map:arna är värdelösa i textbaserade bläddrare eller i grafiska bläddrare med bildfunktionen anstängd.

FÖRDELAR:

Stöds av alla www-klienter. Mapinformationen finns i en extern fil och kan länkas till hur många filer som helst.

EN KOMBINERAD client och server image map är den bästa lösningen. Om en browser inte stöder client maps kan då servern ta över. För att länka ett dokument till till de båda map:arna skriver du:

<A HREF="toolbar.map"><IMG SRC="toolbar.gif" ISMAP USEMAP="#toolbar" WIDTH=n HEIGHT=n ALT="Text"></A>

Upp | HTML-referensbok | Referensböcker