NinetNet 
HTML Image Map
|
|
Image MapMed en "Image Map" kan man definiera områden på en bild så att de blir klickbara länkar. Det vanligaste användningsområdet är kanske att använda en bild som "meny" där länkbeskrivningarna är klickbara och leder till andra sidor på webplatsen. Men det går lika bra att länka till en annan sida på webben eller ett ankare på samma sida. Vill du först veta mer om hur länkar fungerar kan du hitta det under rubriken: Att ange ett klickbart område i form av en rektangel är enklast. Det gör man genom att definiera rektangeln med hjälp av x och y koordinater.
|
Tag ut KoordinaterFör att ge en bild klickbara områden måste man veta hur man tar ut koordinater för en punkt i en bild. Det fixar man lätt genom att öppna bilden i sitt grafikprogram. I exemplet nedan används Microsoft Paint - men det fungerar likadant i de flesta grafikprogram. Koordinaterna anges i pixlar! Vi tänker oss att vi ska ta ut koordinaterna till en punkt i bilden nedan: 
Nämligen det övre vänstra hörnet i en tänkt rektangel runt "Google": 
Så här gör man: 1. Öppna bilden i Paint: 
2. Klicka på ritverktyget och placera markören i övre vänstra hörnet av den tänkta rektangeln: 
3. Läs av punktens koordinater i programmets list längst ner till höger: 
4. X och Y koordinaterna för punkten i det övre vänstra hörnet i den tänkta rektangeln är alltså 22 respektive 28 pixlar: 
5. Kom ihåg dem! Infoga en Image Map - med Klickbar RektangelLåt oss säga att du har en bild där du vill skapa en rektangel som är en klickbar länk till en annan sida på webben. I det här exemplet ska en tänkt rektangel kring "Google" på bilden nedan bli en länk till sökmotorns startsida. 
Läs vidare! Infoga en Image MapKoden för bildkartan infogas på html-sidan med taggen <map>. En "Image Map" måste ha ett namn som skrivs in i startaggen. Här används attributet: id. Det går också att använda attributet: name - men det är inte korrekt om man kodar i XHTML och id fungerar på samma sätt. Om namnet på din "Image Map" är "googleruta" blir det så här:
Koden för en "Image Map" kan skrivas in var som helst mellan <body> och </body>. Själv tycker jag att den blir lättast att hålla reda på om man skriver den intill koden för bilden... Välj själv! AreaMellan <map> och </map> skriver man in de områden som ska vara klickbara med taggen <area>. Eftersom den i det här fallet är en rektangel anges detta med attributet shape och värdet "rect". Precis som i en vanlig länk anges också adressen till sidan som ska öppnas när man klickar i rutan. Så här:
Länken ovan kunde lika gärna varit en länk till en annan sida på din webplats. Eller till ett ankare! Det fungerar precis på samma sätt som när man länkar med taggen <a>. Till exempel kan du ange hur du vill att länken ska öppnas med attributet: target och lägga till en alternativtext med attributet alt. Läs om hur länkar fungerar under rubriken: Skriv in rektangelns koordinaterMan definierar en klickbar rektangel genom att man anger x och y koordinaterna för det övre vänstra hörnet och det nedre högra hörnet i taggen <area>. Sedan räknar webläsaren själv ut de andra två. Koordinaterna skrivs in med attributet coords. 
Koordinaterna för att definiera den här rektangeln skulle alltså bli:
Så här skrivs de in i koden:
Infoga BildenJapp! Så var det bara själva bilden kvar! Fungerar precis som när man infogar vilken bild som helst. Inga krångligheter! Enda skillnaden är att man länkar till sin "Image Map" i bild-taggen med attributet usemap. Bilden infogas där du vill att den ska synas på din websida. Så här:
Attributet style="border: none" infogas för att det inte ska bli en "länk-kant" runt bilden.
Vill du veta mer om hur man infogar bilder kan du hitta det under rubriken: Flera Klick-Rutor i samma BildDet går finfint att ha flera klickbara rutor i samma bild! 
Koden för bilden ovan med tänkta klickbara rektanglar till olika sökmotorer skulle se ut så här:
De klickbara områdena ovan kunde lika gärna varit cirklar eller polygoner! Image Map med Klickbar Polygon - MånghörningAtt ange ett klickbart område som är lite mer osymetriskt görs genom att man tänker sig en sluten polygon - en månghörning. Det fungerar på samma sätt som i rektangeln ovan - men man måste skriva in ALLA hörnens koordinater i koden. I det här exemplet ska en tänkt polygon runt Shakespeare leda till webplatsen: Stratford-upon-Avon - Shakespeares födelsestad. 
Så här ser den tänkta polygonen ut: 
Som du ser har polygonen tio "hörn". För att skapa det klickbara området måste man alltså ange alla tio punkternas koordinater i koden. Man kan börja med vilket som helst. Ordningen spelar inte heller någon roll. I koden nedan är första koordinaten hörnet längst ner till vänster. Sedan vandrar de motsols. Så här:
Klicka på William för att surfa iväg till "Shakespeares födelsestad":
Image Map med Klickbar CirkelVill du ha ett klickbart område i form av en cirkel blir det inte så många nuffror att hålla reda på... Det räcker med koordinaterna för cirkelns mittpunkt plus radiens längd - mätt i pixlar. Låt oss säga att du i den här bilden vill att en klickbar länk i form av en cirkel runt "Romateatern" ska leda till teaterns hemsida. 
För att det ska fungera måste man ta reda på koordinaterna för cirkelns mittpunkt och hur lång cirkelns radie är - mätt i pixlar. Så här gör man: 1. Öppna bilden i ditt grafikprogram och tag ut koordinaterna för cirkelns mittpunkt. 
I det här fallet 70,52 : 
2. Tag reda på radiens längd. 
Subtrahera sedan mittpunktens x-koordinat med denna x-koordinat så får du radiens längd. 
3. Skriv in siffrorna i koden. Först mittenpunktens koordinater och sist radiens längd. Att det är en cirkel anges med shape="circle". Så här:
4. Klart! Lätt som en plätt! Kolla in Romateaterns hemsida! 
Definiera Klick Utanför YtanMed taggen "shape" också kan du bestämma vad som ska hända om man klickar utanför det angivna klickbara området på bilden. Då använder man värdet "default". Den här funktionen stöds av de flesta webläsare. Men det fungerar inte i Internet Explorer 6 - och den webläsaren är ju den de flesta surfar med... Vanligast är kanske att man vill att besökarena ska förflyttas till någon annan sida på webplatsen. Så här skriver man i koden:
Pröva nedan! Klickar du i rutan kommer du till "Google". Klickar du utanför hamnar du hos "AltaVista" i stället! Om det inte fungerar stöder inte din webläsare den här funktionen!
Du kan också ange att det inte ska hända någonting om man klickar utanför. Då skrivs "nohref" in i taggen. Så här: <area shape="default" nohref>. Men det känns kanske lite onödigt eftersom det ju faktiskt inte händer någonting om man klickar utanför ett klickbart område i en "Image map" om man inte särskilt anger det... Title & AltNär man infogar länkar bör man ju ange en beskrivning av länken med attributet title - på sama sätt som man bör ange en alternativ text till infogade bilder med attributet alt. Detta gäller även för Image Maps! Här bör man alltså ange båda två - eftersom en Image Map består av en bild med klickbara områden som är länkar! Vill du göra din sida användarvänligska du ange länkbeskrivning på alla länkar och alternativtext på alla bilder! Så här till exempel:
Tips!Nu när du vet hur det fungerar kan jag tipsa om ett gratisprogram som räknar ut koordinater och fixar koden till "Image Maps" åt dig! Här kan du ladda hem Image Mapper - Gratis! |
