|
Imagemaps
Zunächst einmal benötigt man einen Bildbetrachter, in dem man
die Pixel-Koordinaten in einem Bild ablesen kann, z.B. Paint, welches
mit Windows standartmäßig mitinstalliert wird.
Es gibt mehrere
Möglichkeiten, welche Form man diesen Teilen des Bilds geben kann,
die man als Link verwenden will:
1)Viereck
2)Kreis
3)Vieleck(=Polygon)
Man stelle
sich zunächst das Bild in einem Koordinatensystem vor, wobei der
0-Punkt in der oberen linken Ecke ist. Von links nach rechts verlaufen
die X-Werte, von oben nach unten die Y-Werte. Wenn man mit der Maus übers
Bild fährt, sieht man in der unteren Leiste rechts von "Paint"
die Pixel-Koordinaten des Punktes, auf dem der Mauszeiger gerade ist.
zu 1): Man
weiß ja, welcher Bereich des Bildes nun als Link dienen soll. Setze
den Mauszeiger auf die obere linke Ecke dieses Bereiches und lese die
Koordinaten ab. Das sind zwei Zahlen, ich nenne sie X1 und Y1. Dasselbe
mache mit dem Punkt unten rechts dieses Bereiches, die dann X2 und Y2
heißen.
Der Code dazu: <area shape="rect" coords="X1,Y1,X2,Y2"
href="file.html">
"rect" steht für Viereck, statt file.html fügt man
den Pfad, auf den der Link verweisen soll.
Durch die zwei Punkte (X1,Y1) und (X2,Y2) wird dann ein Parallelogramm
aufgespannt, der als Link dient.
zu 2): Der
Link soll nun kreisförmig sein. Man setze den Mauszeiger auf das
Zentrum des Bildbereiches und lese die Koordinaten ab: X,Y. Dann überlegt
man sich noch, wie groß der Radius des Kreises sein soll. Ich nenne
ihn r.
Der Code ist dann <area shape="circle" coords="X,Y,r"
href="file.html">
"circle" steht für Kreis, sonst alles wie unter 1).
zu 3): Man
will ein Vieleck als Link. Dann liest man wie unter 1) die Koordinaten
für jede einzelne Ecke ab: X1,Y1,X2,Y2,...
Der Code: <area shape="poly" coords="x1,y1,x2,y2,..."
href="file.html">
Nun der komplette
Code wie er im body steht für den Fall 2):
<body>
...
<map name=map>
<area shape="circle" coords="X,Y,r" href="file.html">
</map>
<img src="bild.jpg"
border="0" width=".." height=".." usemap="#map">
...
</body>
Bei mehreren Links einfach für jeden einzelnen das tag <area ...>
machen und alle zwischen <map name=map> und </map> setzen.
Das Wort hinter name=.. ist austauschbar, muß aber identisch mit
dem sein, welches hinter usemap=#.. kommt.
|
