Skapa en bildkarta

1. Inledning

Det finns i princip tre olika sätt att skapa bildkartor (image maps) på:

• manuellt
• i ett bildbehandlingsprogram
• i ett webbdesignprogram

Jag har skrivit en sida om hur man åstadkommer bildkartor på manuell väg på min webresurs. Den skall du läsa om du känner dig osäker på teorin, för den går jag inte igenom här. Du hittar sidan under denna länk >

Man kan dessutom använda ett bildbehandlingsprogram, antingen ett vanligt program som ImageReady eller Fireworks, eller något av alla de särskilda program som är framtagna speciellt för att skapa bildkartor.

Här skall vi dock se hur man kan göra en enkel bildkarta i GoLive. Jag kommer att visa hur enkelt det är att sköta hela processen grafiskt, utan att behöva skriva en millimeter kod.

2. Skapa en bildkarta

Jag använder en fil som heter familjesidan.psd.

Här hittar du filen >

Du kan lägga in den i GoLive som ett smart objekt. Annars går det ju också att öppna den i Photoshop och skapa en GIF-variant av den.

Bilden innehåller fem olika områden, som jag vill göra klickbara, så att man kan komma vidare till olika sektioner på en tänkt sajt.

I GoLive 4 hittade man verktygen för bildkartor i kontextpaletten (Inspector).

I version 5 finns de i stället i verktygspaletten (toolbar).

De är osynliga innan man aktiverat dem, så därför skall vi börja med att göra det:

Börja med att lägga in familjesidan.psd som ett smart objekt på en ny sida. Du kan givetvis också välja en egen bild, om du vill.

I kontextpaletten markerar du fliken More och klickar i rutan Use Map, som bilden visar.

Döp bildkartan till ett lämpligt namn. Jag valde Familjesidan.

I verktygspaletten aktiveras nu verktygen för att skapa och administrera bildkartan.

Verktygen är, från vänster räknade:

- Markera definierat område (select region). Ett definierat område kallas även för hot spot.

- Definiera område: rektangel (create rectangle)

- Definiera område: cirkel (create circle)

- Definiera område: polygon (create polygon)

- Visa länkar (display URL). Aktiverar text som visar det markerade områdets adress.

- Rama in definierat område (frame regions)

- Färglägg definierat område (color regions)

- Välj färg för färgläggningen

- Placera längst fram eller bak (Bring region to front/ back)

Man skapar områden som när man gör andra objekt: väljer rätt verktyg, gör en ram och finjusterar med musen eller piltangenterna. Här har jag skapat ett område, som bilden visar.

I Inspector-paletten skriver man in vart det klickbara området skall länka vidare. Man kan också skriva in titel och alternativtext. Tips!
Man kan enkelt kopiera ett definierat område, m.h.a de vanliga verktygen för kopiering. Genom att hålla nere Shift och piltangenterna kan man också förändra storleken på det skapade området, i fasta steg.