Aktiva områden i bilder

Vi har tidigare tittat på hur man kan göra en bild till en länk genom att i ett ankare använda <IMG>-taggen. Det finns speciella funktioner i HTML som gör att man kan göra om en bild till en bildkarta. Genom att ange olika kordinater kan man skapa olika delar av en bild som aktiva områden, så kallade hot spots (heta områden). När användaren sedan klickar på bilden returneras koordinaterna från musklickningen och därefter utförs den åtgärd som angetts, på samma sätt som med en hypertextlänk. Detta innebär att man kan göra olika områden i en bild till länkar, d.v.s. man kan ha länkar till flera sidor från en enda bild. Man kan ha användning av detta vid många olika situationer, ange aktiva områden i kartor, i diagram, till att göra egna verktygsfält, m.m.

Innan HTML 3.2-standarden lanserades var man tvungen att lägga upp kartan eller bilden på värdatorn (servern) med instruktioner. Dessa bildkartor kallas för Server side Image Maps. Man var tvungen att skapa en speciell fil som berättade vilka områden i bilden som var aktiva och vart länkarna från de aktiva områderna ledde. Till sist var man tvungen att ha ett manus som tog hand om koordinaterna som kom från webbläsaren, tittade efter vilken länk i kartfilen som skulle följas och därefter skickade tillbaka länkens URL till webbläsaren som sedan läste in den nya sidan. Detta var ett ganska krångligt sätt att skapa aktiva områden i bilder, men från och med HTML 3.2-standarden har det blivit betydligt enklare vilket vi går igenom här nedan.

Kartor hos klienten

När HTML 3.2-standarden lanserades fick man ett nytt sätt att ange aktiva områden i bilder. Tekniken som infördes kallas för Client side Image Maps och som medförde en lösning på problemen med aktiva områden i bilder. Denna teknik gör det möjligt att skicka med kartorna till webbläsaren och den kan sedan gå direkt till rätt webbadress istället för att vara tvungen att köra ett manus på värddatorn.

Det fungerar på så sätt att man lägger in alla länkar från en bild i ett dokument, inom ett speciellt märke villket man kan säga innehåller en hel kartfil. Man använder sig av ett speciellt attribut i bildens <IMG>-märke, vilket markerar att bilden innehåller aktiva områden och vilken kartstruktur som ska användas.

När man använder sig av aktiva områden i bilder, bör man tänka på att att ha med alternativa länkar, d.v.s. ha med textlänkar i anslutning till bilden. Detta gör att dom som inte kan se bilder i sin webbläsare har en möjlighet att följa länkarna. Det kan ju också uppstå ett fel i överföringen av bilden från servern, vilket leder till att bilden inte visas, då kan det vara bra om det finns alternativa länkar. Ett annat skäl är att en besökare gärna vill veta vart en länk leder, och vilka alternativ som finns innan man väljer ett.

Koordinater

För att bestämma vilken omfattning ett aktivt område på en bild ska ha anger man inom vilka X-och Y-koordinater området ska innefattas. Vilken punkt som helst i en bild kan uttryckas av en samling koordinater, ett "X"-värde och ett "Y"-värde. Man kan säga att det liknar ett koordinatsystem i ett grafiskt diagram.

Punkten med koordinaterna (0, 0) ligger i det översta vänstra hörnet av bilden. När man anger koordinaterna ska man alltid skriva X-koordinaten före Y-koordinaten. Värdet på X-koordinaten börjar på noll till vänster och ökar när man förflyttar sig åt höger. När det gäller värdet för Y-koordinaten vid bildbearbetning i en dator skiljer det sig från vanliga koordinatsystem, på så sätt att värdet börja på noll längst upp på bilden och ökar när man förflyttar sig nedåt på bilden.

<MAP> och <AREA>

Med märket <MAP> anger man kartstrukturen. Till märket hör ett attribut, <NAME>, vilket ger strukturen ett namn som bilderna kan referera till. Man definierar sedan ett antal områden inne i kartstrukturen och URL-strängar för dem med märket <AREA>. Man avslutar kartstrukturen med </MAP>.

Till märket <AREA> hör fjorton olika attribut:

SHAPE	Detta attribut talar om vilken form området har. Dom värden som finns är `RECT` för att ange rektanglar, `CIRCLE` för cirklar och `POLYGON` för polygoner. Ifall detta attribut inte angetts, antar webbläsaren att det rör sig om en rektangel.
COORDS	Med detta Attribut definierar vilket område som ska omfattas av områdets form. För rektanglar är formen `COORDS="V,Ö,H,N"` [X-koordinator övre vänster], [Y-koordinator övre vänster], [X-koordinator nedre höger], [Y-koordinator nedre höger]. För cirklar är formen `COORDS="X,Y,R"` [X-koordinator cirkelns mitt], [Y-koordinator cirkelns mitt], [cirkelns radie]. För polygoner är formen `COORDS="X,Y,X,Y,X,Y...etc"` [X-koordinator 1], [Y-koordinator 1], [X-koordinator 2], [Y-koordinator 2], [X-koordinator 3], [Y-koordinator 3]...etc.
HREF	Attributet använder man för att ange länken till den adress (URL), som ska läsas in ifall användaren klickar i området.
NOHREF	Detta attribut använder man för att tala om att det inte är en länk som avses, d.v.s webbläsaren ska inte hoppa till någon webbadress ifall användaren klickar i detta område. Vanligtvis används det tillsammans med ett skript. Man kan också använda attributet ifall man vill "göra hål" i aktiva områden
ALT	Med detta attribut anger man en alternativ text som beskriver området. I Netscape 4.0 visas en alternativ text vid markören när användaren pekar på ett aktivt område. I Internet Explorer 5.0 visas det en liten informationsruta som innehåller alternativtexten när muspekaren vilar över ett aktivt område. Tanken med detta attribut är att webbläsare som inte visar bilder ska kunna visa en tabell med de aktiva områdena i stället, vilket gör det möjligt för en användare att kunna följa länkarna även om de inte kan se bilden. Av detta skäl är det alltid att rekommendera att man anger en alternativtext i `<AREA>`-märken.
TABINDEX	Detta attribut talar om i vilken ordning användaren ska nå de olika områdena när denne trycker på tab-tangenten. Attributet ska ha en siffra som värde. När användaren trycker på tab-tangenten flyttar markören till det fält som har närmast högre värde på TABINDEX än det som markören för tillfället befinner sig i.
ACCESSKEY	Detta attribut ger en snabbtangent till ett märke, det definierar ett tangent nedslag istället för ett klick. Attributet ska ha ett tecken till värde. Det möjligör för användaren att hoppa till det aktuella märket genom att helt enkelt skriva tecknet på tangentbordet. Förmodligen måste man hålla ner någon annan tangent för att det ska fungera, exempelvis Alt-tangenten på PC eller kommandotangenten på MAC. Man bör inte välja någon av de vanliga webbläsarbokstäverna (a,r,s,f,v,h) som tangentval.
TARGET	Med detta attribut anger man att mållänken skall visas i ett annat fönster.
onFocus	Attributet används tillsammans med ett skript. Området får fokus genom att användaren klickar på det eller tabbar fram till det.
onBlur	Attributet används tillsammans med ett skript. Det inträffar när området tappar fokus, det vill säga när området har haft fokus och användaren klickar på ett annat område eller tabbar vidare.
onMouseOver	Attributet används tillsammans med ett skript. Inträffar när musen flyttas över området.
onMouseOut	Attributet används tillsammans med ett skript. Inträffar när musen lämnar området.
onClick	Attributet används tillsammans med ett skript. Inträffar när användaren klickar på området.
onDblClick	Attributet används tillsammans med ett skript. Inträffar när användaren dubbelklickar på området.

Om man vill kan man i attributet COORDS ange X-och Y-koordinaterna som en procentandel av bildens totala bredd respektive höjd. Om man till exempel har en bild som är 200 gånger 300 punkter betyder <AREA SHAPE=RECT COORDS="25%, 20%, 70%, 80%" NOHREF> att rektangeln från (50,60) till (140,240) inte ska vara aktiv. Ifall man vill göra hela rektangeln aktiv gör man en rektangel med koordinaterna COORDS="0, 0, 100%, 100%".

Ett <MAP>-element innehåller oftast flera "områdeselement" vilka ger information om bildens olika länkområden. Ett <MAP>-element måste åtminstone innehålla ett <AREA>-element. När en webbläsare träffar på ett <AREA>-märke söks det igenom uppifrån och ned. Ifall två områden skulle överlappa varandra, gäller det område som står först.

För att illustrera hur man bestämmer koordinaterna för olika former av aktiva områden kan vi ta en titt på följande exempel:

Koordinaterna för cirkelns area uttrycks som 70,70,35, koordinaterna för rektangelns area uttrycks som 145,45,250,95 och slutligen koordinaterna för polygonens area som här blir 285,70,305,35,340,35,340,50,375,70,340,90.

Attributet USEMAP

Efter att man har konstruerat kartstrukturen lägger man in den bild som ska utgöra bildkartan med märket <IMG>. För att webbläsaren ska veta att det finns aktiva områden i bilden lägger man till attributet USEMAP i <IMG>-märket. Attributet USEMAP ska ha en URL som värde, vilken anger kartan man vill använda. Kartan kan ligga i en annan fil än den som innehåller <IMG>-märket. Man kan säga att USEMAP är ett kommando som talar om för webbläsaren att den ska göra om en bild till en bildkarta och invänta vidare order.

Den karta som man vill använda som ett URL-fragment måste namnges med hjälp av tecknet #, vilket talar om för webbläsaren att leta efter ett MAP-element i samma HTML-dokument med det namn man anger. Namnet är skiftlägeskänsligt, därför måste man ange det precis som man skrev det i märket MAP. Namnen på alla MAP-element i ett dokument måste vara unika. Om endast tecknet # används måste MAP-elementet vara i samma dokument. Det kan se ut på följamnde sätt:

USEMAP="#nordenkarta"

I ett MAP-element måste <NAME>-attributet finnas med och namnet måste vara unikt. Man kan hänvisa till ett MAP-element från ett annat dokument. Om man anger sökvägen på samma sätt som ett SRC-attribut för ett <IMG>-element. Det kan se ut på följamnde sätt:

USEMAP="kartfil.htm#nordenkarta"

Definiera aktiva områden genom koordinater

I detta avsnitt kommer vi att titta på hur man gör för att bestämma vilka koordinaterna som ska utgöra ett aktivt område i en bild. Det vi gör är att ladda in bilden vi skall använda oss av i ett bildbehandlignsprogram. I detta exempel har vi använt oss av Paint Shop Pro 5.0, men man kan använda sig av vilket bildbehandlingsprogram som helst.

När bilden är inladdad i bildbehandlingsprogrammet ser man till att pekverktyget är valt. Man ska också se till att måttinställningen är i pixlar och inte i någon annan måttenhet. För att sedan bestämma vilka koordinater man ska använda sig av till sitt aktiva område, placerar man markören i den punkt man först vill läsa av, i statusradens vänstra hörn längst ner kan man sedan läsa av vilka koordinater som pekaren befinner sig över. Därefter placerar man pekaren över nästa punkt och läser av koordinaterna, o.s.v. Till slut har man fått fram alla koordinater för det aktiva området som man sedan skriver in i sin kartstruktur.

För Vetlanda kommun blir koordinaterna:

<COORDS="216,206,221,142,213,138,214,129,240,143,262,149,285,146,296,139,
         308,142,307,157,299,158,297,205,260,207,246,212,231,221">

Man gör samma sak med de övriga kommunerna och konstruerar sedan kartstrukturen "jonkoping" med länkarna till de olika kommunerna på följande sätt:

<MAP NAME="jonkoping">
<AREA SHAPE="POLYGON" COORDS="85,48,86,45,89,43,91,40,93,38,94,34,112,36,
                              113,40,107,44,101,64,101,76,87,74,95,61,87,56"
      HREF="http://www.mullsjo.se" TARGET="_top" ALT="Mullsjö kommun">
<AREA SHAPE="POLYGON" COORDS="105,69,110,62,112,43,125,40,135,18,144,20,
                              132,50,129,67,121,71,114,79,108,73"
      HREF="http://www.habokommun.se" TARGET="_top" ALT="Habo kommun">
<AREA SHAPE="POLYGON" COORDS="190,25,219,25,225,16,231,16,245,49,237,62,
                              216,56,202,57,192,48"
      HREF="http://www.tranas.se" TARGET="_top" ALT="Tranås kommun">
<AREA SHAPE="POLYGON" COORDS="177,63,189,53,200,62,214,60,237,66,250,102,
                              229,94,226,83,193,90,190,71,178,70"
      HREF="http://www.aneby.se" TARGET="_top" ALT="Aneby kommun">
<AREA SHAPE="POLYGON" COORDS="215,125,228,99,251,105,257,103,285,103,312,122,
                              308,138,296,135,278,144,253,145,228,130"
      HREF="http://www.eksjo.se" TARGET="_top" ALT="Eksjö kommun">
<AREA SHAPE="POLYGON" COORDS="216,206,221,142,213,138,214,129,240,143,262,149,
                              285,146,296,139,308,142,307,157,299,158,297,205,
                              260,207,246,212,231,221"
      HREF="http://www.vetlanda.se" TARGET="_top" ALT="Vetlanda kommun">
<AREA SHAPE="POLYGON" COORDS="160,133,170,102,223,87,225,97,211,122,211,141,
                              216,143,215,164,204,154,192,154,186,158,182,148,
                              173,147,172,142"
      HREF="http://www.nassjo.se" TARGET="_top" ALT="Nässjö kommun">
<AREA SHAPE="POLYGON" COORDS="164,160,173,151,178,151,184,161,197,156,207,161,
                              213,169,212,205,170,220,170,185,164,171"
      HREF="http://www.savsjo.se" TARGET="_top" ALT="Sävsjö kommun">
<AREA SHAPE="POLYGON" COORDS="83,198,100,199,109,192,119,194,126,186,151,186,
                              161,174,167,186,160,264,148,266,130,239,98,246,
                              92,243,90,227,82,215"
      HREF="http://www.varnamo.se" TARGET="_top" ALT="Värnamo kommun">
<AREA SHAPE="POLYGON" COORDS="8,212,25,199,35,181,61,158,75,133,94,133,99,125,
                              104,150,79,151,66,176,80,192,77,216,88,241,79,249,
                              69,249,61,223,18,236"
      HREF="http://www.gislaved.se" TARGET="_top" ALT="Gislaved kommun">
<AREA SHAPE="POLYGON" COORDS="71,172,84,152,103,153,104,163,122,185,116,190,
                              108,187,99,195,86,193,79,178"
      HREF="http://www.gnosjo.se" TARGET="_top" ALT="Gnosjö kommun">
<AREA SHAPE="POLYGON" COORDS="103,121,114,115,125,124,141,118,143,134,155,135,
                              168,144,167,152,161,157,159,171,146,182,126,183,
                              108,163,109,137"
      HREF="http://www.vaggeryd.se" TARGET="_top" ALT="Vaggeryd kommun">
<AREA SHAPE="POLYGON" COORDS="77,128,88,79,98,82,106,79,114,83,132,70,135,88,
                              148,85,149,66,181,22,186,24,187,50,173,62,175,74,
                              186,74,188,93,167,100,155,132,147,131,144,113,126,119,
                              115,111,97,120,91,131,78,128,84,102"
      HREF="http://www.jonkoping.se" TARGET="_top" ALT="Jönköping kommun">
</MAP>

Där man sedan vill ha sin karta med dom aktiva områdena med länkar till de olika kommunerna skriver man följande:

<H3>Jönköpings läns kommuner</H3>

<P>Klicka på någon av kommunerna på kartan eller någon av länkarna
   till höger för att komma till den önskade kommunens hemsida:</P>

<TABLE CELLPADDING=30>
 <TR>
  <TD WIDTH=330>
      <IMG SRC="gifs/html/jonklan.gif" ALT="Jönköpings läns kommuner";
               USEMAP="#jonkoping" BORDER="0">
  </TD>
  <TD VALIGN=TOP>
      <BR>
      <A HREF="http://www.aneby.se">Aneby<BR>
      <A HREF="http://www.eksjo.se">Eksjö<BR>
      <A HREF="http://www.gislaved.se">Gislaved<BR>
      <A HREF="http://www.gnosjo.se">Gnosjö<BR>
      <A HREF="http://www.habokommun.se">Habo<BR>
      <A HREF="http://www.jonkoping.se">Jönköping<BR>
      <A HREF="http://www.mullsjo.se">Mullsjö<BR>
      <A HREF="http://www.nassjo.se">Nässjö<BR>
      <A HREF="http://www.savsjo.se">Sävsjö<BR>
      <A HREF="http://www.tranas.se">Tranås<BR>
      <A HREF="http://www.vaggeryd.se">Vaggeryd<BR>
      <A HREF="http://www.vetlanda.se">Vetlanda<BR>
      <A HREF="http://www.varnamo.se">Värnamo<BR>
  </TD>
 </TR>
</TABLE>

Vi har här skapat en tabell med två celler. I den vänstra cellen ligger bilden med kartstrukturen och i den högra har vi skrivit in in alternativlänkar till de olika kommunerna.

Resultatet blir följande i webbläsaren:

Jönköpings läns kommuner

Klicka på någon av kommunerna på kartan eller någon av länkarna till höger för att komma till den önskade kommunens hemsida:

Aneby
Eksjö
Gislaved
Gnosjö
Habo
Jönköping
Mullsjö
Nässjö
Sävsjö
Tranås
Vaggeryd
Vetlanda
Värnamo

Netscape markerar bilden med en blå ram som ett tecken på att den har aktiva områden. När man håller markören över ett akltivt område visas länkens URL som området leder till nere i fönstrets statusrad. Den text man angett med attributet ALT visas vid markören. I Internet Explorer 5.0 visas en liten informationsruta som innehåller denna text när markören vilar över ett länkområde.

Om man trycker på Tabb-tangenten kan man gå från ett "aktivt område" till ett annat. Allteftersom vart och ett blir aktivt, markeras det. När man sedan trycker på Retur- eller Enter-tangenten skickas man vidare till den hemsida som länken leder till. Man kan specificera Tabb-ordningen genom att använda sig av attributet TABINDEX.

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.