Låt oss föreställa oss att bilden till höger heter engswe.gif och du vill göra en bildkarta av den. Klickar användaren på svenska flaggan ska sidan sverige.html visas. Om användaren däremot klickar på den engelska flaggan ska england.html visas.
Många sidor på internet har bilder som leder dig till olika ställen beroende på var på bilden du klickar. Sådana bilder kallas på engelska imagemaps. På svenska säger man bildkartor eller klickbara bilder.
Bildkartorna skiljer sig från vanliga bildlänkar i att de beroende på var användaren klickar kan leda denne till olika sidor. Det har länge funnits ett par olika sätt att tillverka bildkartor. Numera använder dock de flesta de s.k. klientbaserade bildkartorna. Hur dessa tillverkas ska vi lära oss i denna lektionen.
Låt oss föreställa oss att bilden till höger heter engswe.gif och du vill göra en bildkarta av den. Klickar användaren på svenska flaggan ska sidan sverige.html visas. Om användaren däremot klickar på den engelska flaggan ska england.html visas.
Först ska koden till bilden skrivas. Här talar man om precis var användaren ska klicka för att komma till de olika sidorna. Man delar in bilden i olika rutor, ringar eller andra figurer. Så här kan det se ut:
<MAP NAME="flagga"> Taggen <MAP> talar om för din webläsare att det är frågan om en bildkarta. Attributet NAME ger koden sitt namn.
<AREA SHAPE="rect" COORDS="1,0,86,46" HREF="england.html">
<AREA SHAPE="rect" COORDS="86,0,170,46" HREF="sverige.html">
<AREA SHAPE="default" NOHREF>
</MAP>
Taggen <AREA> är den viktiga i sammanhanget. Attributen är följande:
| SHAPE | Berättar hur figuren ska se ut. Möjligheterna är: rect (rektangel), circle (cirkel), poly(polygon) och default. Default tar hand om alla koordinater utanför figurerna. |
| COORDS | Berättar vilka koordinater figuren har. De olika figurerna behöver olika många koordinater. Ex. Rektangel -> x1,y1,x2,y2 Cirkel -> x1,y1,radie Polygon -> valfritt antal |
| HREF | Anger vilken sida som ska visas när användaren klickar inom figuren. |
Som tur är finns det bra program som kan göra det tunga jobbet att få rätt med koordinaterna. Det mest kända programmet för bildkartor är Mapedit. I programmet ritar man en figur med musen. Programmet frågar sen vilken sida rutan ska vara hänvisad till. Man kan använda sitt bildbehandlingsprogram (tex paint shop pro) eller ladda ner ett gratis program enbart för detta, tex TomaWeb Image Mapper.
Därefter ska bilden infogas på din sida. Det görs med ett undantag på samma sätt som med en vanlig bild:
<IMG SRC=engswe.gif USEMAP=#flagga>
Det nya attributet USEMAP talar om vilket namn koden till bilden har.
Om du vill ha bildkartans kod i en annan fil går det bra:
<IMG SRC=engswe.gif USEMAP=bildkart.html#flagga>
Det färdiga resultatet av engswe.gif blev så här: