Step by Step Anleitung für Image Map
Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Der sensitiven Bereich, kann die Form eines Rechtecks, eines Kreises oder eines Polygons haben.Die Koordinaten für einen sensitiven Bereich werden im Photoshop abgelesen, anschliessend geben Sie im Interface unter Edit den entsprechenden HTML Code ein.
Das Bild unten enthält solche sensitiven Bereiche. Wenn Sie mit der Maus darüber fahren, erhalten Sie Informationen darüber, wie Sie die Koordinaten für einen Bereich im Photoshop ablesen können.
Vorgehen
Koordinaten bestimmen
Im Photoshop müssen Sie als erstes die Koordinaten bestimmen.- - Bild im Photoshop öffnen
- Bereich der Imagemap markieren:
- Öffnen Sie unter Window -> Palettes -> Show Options die Option Palette
Klicken Sie auf das Auswahl Werkzeug, Sie erhalten unter Options die Angaben, shape Rectangular, style Normal
sie beziehen sich auf ein Rechteck.
Um eine Kreisform zu erhalten wählen Sie unter Shape Elliptical und unter Style Constrained Aspect ratio, dies bewirkt, dass Sie einen Kreis und nicht eine Ellipse erhalten.
Um eine freie Form, also ein Polygon zu erhalten, klicken Sie auf das Lasso Tool
Um eine gerade Markierung zu erhalten, klicken Sie ins Bild und drücken gleichzeitig die ALT Taste. Jetzt können Sie einen beliebigen Bereich markieren.
- Als nächstes müssen Sie sich die Koordinaten aufschreiben.
Öffnen Sie unter Window -> Palettes -> Show Info die Info Palette.
Überprüfen Sie unter Info, die Einstellung für die Koordinaten Anzeige, sie muss auf Pixel einegestellt sein.
Wenn Sie jetzt mit der Maus auf den oberen linken Ecken des markierten Bereichs fahren, werden die Koordinaten dieser Ecke angezeigt.
Notieren Sie sich die Koordinaten auf einem Blatt.
- Öffnen Sie unter Window -> Palettes -> Show Options die Option Palette
HTML Code für die Image Map
Unter Edit im Interface, können Sie nun den HTML Code für die sensitiven Bereiche in Ihrem Bild eingeben.Für jeden sensitiven Bereich müssen Sie die From, ihre Koordinaten und den Link, der beim Klicken aktiviert werden soll angeben. Den Link kopieren Sie nach <HREF=""> zwischen die zwei Anführungszeichen.
-
Rechteck:
- <AREA SHAPE="RECT" COORDS="x1,y1,x2,y2" HREF="">
dabei bedeuten:
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben
Beispiel:
<AREA SHAPE="RECT" COORDS="311,164,367,260" HREF="http://www.planet9.com/earth/sf/bugsinsoma/index.htm">
- Kreis:
- <AREA SHAPE="circle" COORDS="x,y,r" HREF="">
dabei bedeuten:
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel
Beispiel:
<AREA SHAPE="circle" COORDS="115,211,37" HREF="http://mannheim.nationaltheater.de/vrml.html">
-
Polygon:
- <AREA SHAPE="polygon" COORDS="x1,y1,x2,y2 ...
xn,yn" HREF="">
dabei bedeuten:
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
Beispiel:
<AREA SHAPE="polygon" COORDS="227,51,221,82,246,115,226,188,248,220,277,190,293,130,288,76,264,54" HREF="http://www.arts.ucsb.edu/~messiah/rhizomat/rhizomat.html">
Bookmarks
Die Adresse des Links können Sie aus den Bookmarks kopieren. Klicken Sie im Netscape unter Bookmarks auf Edit Bookmarks.
Selektieren Sie den Link dessen Adresse Sie kopieren möchten. Klicken Sie unter Edit auf Bookmark Properties. Ein weiteres Fenster wird geöffnet.
Markieren Sie die Adresse unter Location mit der linken Maustaste und kopieren Sie die Adresse mit der mittleren Maustaste im Interface zwischen die zwei "" nach <HREF=>
