|
Imagemaps
Zunächst einmal benötigt man ein Grafikprogramm, in dem man
die Pixel-Koordinaten in einem Bild ablesen kann, z.B. Paint, welches
mit Windows standardmäßig mit installiert wird.
Es gibt mehrere Möglichkeiten, welche Form man diesen Teilen des
Bilds geben kann, die man als Link verwenden will:
- Viereck
- Kreis
- 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.
Dieser Workshop ist ein Service von more4webmaster.de
Für Hilfe und mehr besuchen Sie unser more4webmaster.com Board
|
