Tripod-HTML-Kurs (1)
Tripod-HTML-Kurs (2): Einführung
- <BODY>-Tag
- <IMG>-Tag
- Imagemaps
- Farbmodelle
- Bildformate
- <META>-Tag
- farbige Tabellen
- Style Sheets
- Formulare
- Test
Tripod-HTML-Kurs (2): Image Maps
Vielleicht sind Sie auch schon auf solche Bilder gestossen, bei denen die verschiedenen
Teile des Bildes verlinkt sind und Sie zu unterschiedlichen Zielen führen.
Ein Beispiel ist die Weltkarte der Lycos Reisebilder.
Ein Click "auf" Afrika führt Sie zu afrikanischen Reisebildern, ein Click "auf" Asien läßt Sie
Bilder aus dieser fremden Welt genießen.
Solche Bilder nennt man Imagemaps, übersetzt etwa mit "Bilderkarten", im deutschen
Sprachraum hat sich der Begriff "verweis-sensitive Grafiken" dafür eingebürgert.
Die Teile des Bildes, die verlinkt sind, nennt man "hot regions", übertragen auf das
obere Beispiel sind die verschiedenen Kontinente der Weltkarte die "hot regions".
Diesen schönen Effekt können Sie mit dem <MAP>-Tag erzielen.
Im Beispiel soll ein Bild namens "weltkarte.gif" eingebunden werden, verschiedene
Regionen des Bildes sollen zu den folgenden Adressen führen:
- "#unten", d.h. ein Verweis auf derselben Seite
- "http://www.lycos.de", d.h. ein Verweis auf einen externen Server
- "http://www.lycos.de/webguides/spiele", d.h. ein Verweis auf einen externen Server
Die Regionen sollen unterschiedliche Formen haben und zwar für den ersten Verweis soll
die klickbare Region ein Kreis sein, für den zweiten Verweis soll die Region rechteckig sein,
für den dritten Verweis soll die Region unregelmäßig geformt sein ("Vieleck").
Folgende Informationen müssen festgelegt werden, damit der Browser weiß,
wohin ein Click auf eine hot region führen soll.
die Form der hot region muß beschrieben werden
die Adresse wohin der Verweis gehen soll, muß notiert sein
Punkt 1 und 2 definieren die Imagemap
das Bild "weltkarte.gif" muß eingebunden werden mit einem Hinweis auf die verwendete,
unter Punkt 1 und 2 definierte Imagemap.
<BODY>
......................
<MAP name="ein_Name">
<area shape=circle coords="10,20,15" href="#unten">
<area shape=rect coords="3,1,5,10" href="http://www.lycos.de/">
<area shape=polygon coords="3,1,7,1,10,5,7,7" href="http://www.lycos.de/webguides/spiele">
</MAP>
......................
<IMG src="weltkarte.gif" usemap="#ein_Name">
</BODY>
Die Definition der Imagemap steht zwischen den <MAP>....</MAP>-Tags.
Im ersten <MAP>-Tag muß der Imagemap ein Name gegeben werden (im Beispiel "ein_name").
Mit Hilfe des Namens wird bei der Einbindung des Bildes (Einbindung des Bildes weiter unten
mit dem <IMG>-Tag) auf diese Imagemap verwiesen.
Die Form einer hot region wird innerhalb des <AREA>-Tags mit den Attributen
"shape" und "coords" gestgelegt. "Shape" heißt Form, "coords" kommt von Koordinaten.
Im Beispiel ist dem Attribut "shape" der Wert "rect" zugeordnet worden.
"rect" kommt von rectangular, d.h. rechteckig, damit wird eine rechteckige Fläche definiert.
Mit "circle" (also shape=circle) wird ein Kreis als hot region definiert, und mit
"polygon" wird ein Vieleck als hot region definiert.
Die Eckpunkte jeder Form werden in Pixelkoordinaten angegeben. Die Koordinaten beziehen sich stets
auf das Bild und nicht etwa auf die Stellung des Bildes auf der Seite.
Am besten können die Pixelkoordinaten eines Bildes mit Hilfe eines Bildverarbeitungsprogramm
ausgelesen werden.
Angabe der Koordinaten von rect, circle und polygon:
Der Bezugspunkt bei Angabe der Koordinaten der hot region ist die linke obere Ecke des Bildes.
Ausgehend von diesem Bezugspunkt werden die Koordinaten der hot region angegeben.
rect:
Das Rechteck wird durch die obere linke ("ol") und die untere rechte ("ur") Ecke festgelegt.
Die Koordinaten werden als Abstände von dem Bezugspunkt (s.o., linke obere Ecke des Bildes)
angegeben: coords="x_ol, y_ol, x_ur, y_ur".
x_ol: Anzahl der Pixel in waagrechter Richtung von links für die obere linke Ecke,
y_ol: Anzahl der Pixel in senkrechter Richtung von oben für die obere linke Ecke
x_ur: Anzahl der Pixel in waagrechter Richtung von links für die obere rechte Ecke
y_ur: Anzahl der Pixel in senkrechter Richtung von oben für die obere rechte Ecke.
circle: Ein Kreis wird festgelegt durch den Mittelpunkt x,y und den Radius r: coords="x,y,r".
x gibt die Anzahl der Pixel in waagrechter Richtung von links an,
y die Anzahl der Pixel in senkrechter Richtung von oben.
Im obigen Beispiel hat der Kreis einen Radius von 15 Pixel.
polygon: Das Vieleck wird durch seine Ecken festgelegt, die Ecken haben die Koordinaten x1, y1, x2, y2, x3,
y3, x4, y4, ...: coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5"
x1, y1 sind die Koordinaten des ersten Eckpunktes, x1, y2 sind die Koordinaten des zweiten Eckpunktes und so weiter.
Wie oben bedeuten die x-Werte die Anzahl der Pixel in waagrechter Richtung von links, die y-Werte sind
die Anzahl der Pixel in senkrechter Richtung von oben.
Die Region ist damit festgelegt. Mit href="..." wird angegeben welche Adresse angesteuert werden soll,
wenn auf die entsprechende Region geklickt wird. "href" haben Sie im ersten Teil des Kurses
im Kapitel "Links" kennengelernt.
Das Bild selbst wird mit dem <IMG>-Tag eingebunden und mit dem Attribut "usemap" wird angegeben,
welche Imagemap verwendet werden soll: usemap="#ein_Name".
Damit haben Sie das Handwerkszeug zusammen, um Ihre eigenen Imagemaps zu erzeugen.
Mit Grafikprogrammen ist es möglich, sich die Pixelkoordinaten eines Bildes anzeigen zu lassen,
andere Programme erlauben es die hot region einfach mittels Cursor festzulegen, die Koordinaten werden
dann in eine Datei geschrieben.
Viel Spaß beim Ausprobieren!
