89 besökare, 1 medlem och 4 Studenter är online nu
Loopia

Photoshop

Imagemaps i ImageReady

Gävle Kommuns webplats!

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.

 

 

Skapa oregelbundna klickbara områden (Imagemaps):

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" (Rectangle Image map):

Här kan du välja att rita cirkelformade, rektangelformade eller oregelbunden form med "Polygont bildschema" (Polygon Image Map):

 

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:

 

 

TIPS! Om du vill återställa ImageReady till standardläge för att paletter och menyer ska återgå till ursprungsläge använder du samma metod som vid återställning av Photoshop: starta ImageReady och håll sedan CTRL+SHIFT+ALT intryckt tills dialogrutan visas:


 

Layer-baserade bildscheman

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":

 

 

Spara bilder och HTML-kod för Imagemaps

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:

<HTML>
<HEAD>
<TITLE>sverigekarta</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>


<!-- ImageReady Slices (sverigekarta.psd) -->

<IMG SRC="sverigekarta.gif" WIDTH=167 HEIGHT=398 BORDER=0 USEMAP="#sverigekarta_Map">

<MAP NAME="sverigekarta_Map">

<AREA SHAPE="poly" ALT="
Klicka här för att komma till Webdesignskolan!"
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" HREF="https://webdesignskolan.se"
TARGET="_blank">
</MAP>

<!-- End ImageReady Slices -->

</BODY>
</HTML>