Logga in
Klickbara områden i bilder kallas för "Imagemaps" eller "Hotspots". Den svenska översättningen i ImageReady är "Bildschema". För att göra en bild klickbar används X- och Y-koordinater med enheten "pixlar" för att beskriva den klickbara ytan för webbläsaren.
Det klickbara området i kartan nedan har följande koordinater, som alltså måste anges i HTML-koden:
COORDS="92,244,
90,254, 83,257, 81,253, 79,252, 75,246, 79,240, 75,234, 69,232,
68,227, 61,218, 60,220, 51,217, 55,209, 61,211, 62,204, 65,202,
64,197, 68,196, 73,198, 81,198, 84,200, 92,200, 91,211, 94,214,
90,215, 90,225, 91,234"
I många program som skapar HTML-kod finns en inbyggd funktion för att rita "hotspots". Saknas det i din egen webb-editor kan du istället använda ImageReady för att generera HTML-koden samtidigt som du sparar bilden.
Den bästa lösningen för att göra olika delar av en bild klickbara brukar vara att dela upp bilden i delar (slices) och spara delarna som egna bildfiler. I HTML-koden kan man då skapa en länk från varje del av bilden.
Photoshop och ImageReady har funktionen "Segment" (Slice) till hjälp för att dela upp bilder och även skapa HTML-koden. Läs mer i guiden Segment - Slices »
I vissa fall är det svårt att dela bilden på rätt sätt, speciellt när området behöver vara oregelbundet. Då är det bättre att inte dela upp bilden och istället skapa klickbara områden, "Imagemaps". Det kan gälla tex gruppfotografier där vissa personer ska vara klickbara eller kartor där vissa områden ska vara länkade.
"Imagemaps" finns i två varianter; Serverside och Clientside (Server-och klientbildscheman).
"Serverside Imagemaps" betyder att webbservern
tolkar vilka delar av en bild som är klickbara.
"Clientside Imagemaps" ger instruktioner till webbläsaren
och blandar inte in webbservern alls, vilket innebär att webbsidorna
laddas snabbare.
Den vanligaste typen av Imagemaps är idag Clientside som också är standardinställningen i ImageReady.
 |
Det första exemplet visar hur du kan skapa klickbara områden i en karta. Här ska de länkade områdena motsvara geografiska delar och blir alltså oregelbundna. Att dela upp kartan i småbitar ger
rektangelformade bitar som inte stämmer med de oregelbundna
områdena. Imagemaps kan ha oregelbundna former och i ImageReady skapar du dem med polygonverktyget (Polygonal) som finns i verktygsgruppen
du hittar om du klickar och håller intryckt på verktyget
"Rektangulärt bildschema"
Här kan du välja att rita cirkelformade, rektangelformade
eller oregelbunden form med "Polygont bildschema"
|
Rita ut den oregelbundna formen genom att klicka ut punkterna för att skapa polygonformen. Behöver du justera formen efteråt
använder du verktyget "Bildschema -välj" 
(Image Map Select) och drar i de punkter som ska justeras.
Dra i de punkter som behöver justeras: |
SHIFT+Klicka för att lägga till en punkt: |
ALT+Klicka på en punkt för att ta bort den: |
När du är nöjd med formen på din Imagemap ställer du in funktionerna för det klickbara området. Använd paletten "Bildschema" (Image Map):
Namn på Imagemap-området
HTML-koden kräver ett namn på de olika koordinatområdena.
Undvik ÅÄÖ, versaler och mellanslag i namnet.
URL
Adressen till den webbsida etc som länken ska leda till.
Asolut sökväg:
http:/www.yourdomain.com/your_folder/your_webbpage.html
Relativa sökväg:
../your_folder/your_webbpage.html
Mål (Target)
Målet för hur länken ska öppnas. Ska sidan öppnas
i samma fönster eller ram/frame anger du ingenting här.
_blank öppnar länkad webbsida i ett nytt webbläsarfönster
_self samma fönster (behöver normalt inte anges)
_parent i "nästlade ramar" (flera frameset)
om du vill öppna i överordnat frameset.
_top i frameset om du vill öppna sidan i hela webbläsarfönstret.
ALT
Alternativt
namn som visas i vissa webbläsare när muspekaren förs
över länkområdet (gul etikett). Visas också
som länk-informaton, om webbläsaren inte visar bilder. (Bra
för synskadade besökare med talsyntesprogram).
Här kan
du använda ÅÄÖ.
Exempel på alternativt namn:
Den bästa lösningen för att göra olika delar av en bild klickbara brukar vara att dela upp bilden i delar (slices) och spara delarna som egna bildfiler. I HTML-koden kan man då skapa en länk från varje del av bilden. Photoshop och ImageReady har funktionen "Segment" (Slices) till hjälp för att dela upp bilder och även skapa HTML-koden.
Läs mer i guiden Segment - Slices »
I det här exemplet när knapparna placerats på en bakgrundsbild. och de ligger placerade så att det är svårt att dela upp bilden och få dem klickbara som separata bilder.
Den övre bilden visar den önskade placeringen av knapparna och den undre bilden visar en möjlig uppdelning med "Segment" (Slices)
Knapparna som ska länkas:
Exempel på uppdelning av bilden:
De övre 2 knapparna ligger förskjutna mot varandra så att det är omöjligt att dela dem som rektangulära bilder. Det här alltså ett bra exempel när det krävs klickbara områden, Imagemaps, i bilden .
Verktyget som kan användas är "Bildschemacirkel" 
(Circle Image Map). Om knapparna ligger på olika Layer kan du använda Layer för att definiera formen
på din Imagemap.
Högerklicka på Layer-namnet på det Layer som objektet eller knappen ligger i och välj menyn "Nytt Layer-baserat bildschemaområde" (New Layer based Image Map area):
Standardinställningen är rektangulära områden. Du byter form på din Imagemap vid behov i paletten "Bildschema" (Image Map):
Knapparna med Layer-baserade Imagemaps:
...och när de ändrats till "Cirkelform":
För att spara bilderna optimerar du dem i rätt format för din webbsida. Läs mer om Optimering i guiden Animera i ImageReady" »
Exempel på optimeringsalternativ:
Välj att spara den optimerade bilden och HTML-koden med menyn "Arkiv/Spara optimerad" (File/Save optimized) eller med snabbkommando CTRL+Shift+S
Se till att alternativet "HTML och bilder" är valt och välj sedan knappen "Utgångsinställningar" (Output Settings):
Här kan du välja vilka alternativ som ska gälla för den HTML-kod som genereras. Du bör känna till vad de olika HTML-alternativen betyder. Notera inställningen nere till vänster där du kan välja om dina Imagemaps ska vara "Serverside" eller "Clientside".
Ändra ingenting här om du inte har särskilda skäl till detta:
Spara din bild och HTML-kod. När du öppnar den i Internet Explorer kan det se ut så här. Den gula etiketten är ALT-namnet:
HTML-koden som anger vilket område i bilden som är klickbart (Imagemap) ser ut som exemplet nedan. X- och Y-koordinater anger det oregelbundna klickbara området i kartan:
skriv ut »
(
(