Att använda bildkartor

Bildkartor ger dig ett sätt att låta en eller flera delar av en bild bli klickbara och länkande. För att använda bildkartor krävs att din shop har tilläggsmodulen Bildkartor.

En bildkarta kan till exempel användas för en bild där flera produkter eller flera varugrupper är med i samma bild. Ofta kan du få ett snyggare resultat för en kampanjsida om du fotograferar flera artiklar intill varandra i samma bild istället för att försöka photoshoppa ihop en kampanjbild ifrån flera artikelbilder.

Bildkartor är inte en widget i sig, utan ett tillval man kan göra på bilder i filarean som då visas på dessa bilder om de används i en bildwidget. 

Exempel på när bildkartor kan användas

Bildkartor kan användas på en rad olika sätt, här följer några exempel:

• För att länka till olika artiklar, till exempel på ett foto av en modell med byxor, t-shirt, kofta, skor och hatt som alla säljs i din butik. Bilden skulle till exempel kunna ligga på en innehållssida som heter "Inspiration" eller på startsidan under titeln "Veckans outfit".
• För att skapa en julkalender där dagens lucka är klickbar och leder till en innehållssida med ett erbjudande om dagen. Se denna guide för steg-för-steg om hur du skapar en sådan.
• I en bild som har flera knappar på sig, så som för en innehållssida för en kampanj där du på bilden har knapparna "Dam" och "Herr" som du vill ska leda till olika sökresultat.
• När du vill dela upp en layout på sätt som annars är svårt med widgetar, till exempel lägga flera länkande bilder ovanför varandra med andra widgetar till höger eller vänster.
• För att länka till flera olika varugrupper, så som i vårt exempel nedan.

Att lägga in en bildkarta

Gör så här:

I detta exempel kommer vi använda en bild där vi i ett bildredigeringsprogram lagt på bildtexter för olika varugrupper. Besökaren kommer att länkas in till varugrupperna som motsvarar de olika delarna av bilden.

1. Ladda upp bilden till filarean. (Webbplats -> Filarean.) Precis som när du använder en vanlig bildwidget vill du innan du laddar upp bilden ha räknat ut hur många pixlar bilden ska ta upp.
2. Fortfarande i filarean, klicka i-ikonen för bilden du just laddade upp.
   
3. Klicka knappen Bildkarta.
   
4. Kryssa i rutan Aktiverad för att bildkartan ska bli aktiv.
5. Med listrutan Visa ytor som väljer du hur länkarna ska presenteras för besökarna.
   • Punkter - animerad plupp ger animerade punkter i mitten av de rektanglar du ritar i nästa steg. Punkterna klickas för att följa länken.
   • Punkter - plustecken ger istället punkter med plustecken.
   • Rektanglar gör att ingenting extra visas på bilden, det enda som visar för besökaren att delen av bilden är klickbar är att muspekaren skiftar till en hand med ett finger och eventuell tooltip/inforuta du ger länken.
   • Rektanglar med indikation fungerar likadant som Rektanglar, men de klickbara rektanglarna markeras även av en halvgenomskinlig vit ruta när användaren för muspekaren över dem.
   I vårt exempel väljer vi Rektanglar då texterna på bilden ändå gör det tydligt vilka delar som man kan förvänta sig vara klickbara.
6. Drag och släpp för att rita rektanglar på bilden. Dessa rektanglar blir de länkande områdena på bilden. Om flera rektanglar överlappar så kommer rektangeln du skapade sist vara den som blir klickad.
   
   Vi ser till att rita ut rutan för Mobiler efter rutan för Laptops så att den överlappande delen leder till Mobiler.
7. När du ritat en ruta får du upp följande dialogruta:
   
8. Som Typ av länk väljer du endera Artikel, Varugrupp, Innehållssida eller Länk (för externa länkar eller andra typer av interna länkningar, till exempel sökfiltreringar).
9. Det du skriver in i rutan Tooltip / inforuta kommer att synas när muspekaren förs över den länkande delen. Du kan skriva in olika tooltips för olika språk.
10. Visa yta under period ska bara fyllas i om länken endast ska synas under en begränsad period. Klickar du i rutan så får du upp en kalender. Starttid och/eller sluttid kan lämnas tomt om någon av dessa inte ska vara begränsade. Under perioder en länk inte visas syns ej heller tooltips för den länken.
11. Klicka knappen Spara.
12. Gå till sidan eller widgethållaren där du vill lägga in bilden och lägg till en bildwidget som använder bilden i filarean. Se denna guide för mer info om hur bild-widgeten används.