 verweissensitive Flächen, Image-Maps
Alternativ zum Textlink oder auch zum Imagelink (gesamtes Bild kann angklickt werden) bietet sich die Möglichkeit bestimmte Bereiche (hot spots) innerhalb eins Images als Verweisfläche zu deklarieren.
|
|
Zur Erklärung (blaue Begriffe merken):
Das gesamte Image (schwarz umrandet) ist die 'map'.
Innerhalb dieser "map" werden mittels Koordinatenangaben die verweissensitiven Bereiche festgelgt.
Dabei unterscheidet man folgende Formen (shapes):
1) Rechteck (rectangle), attributname 'rect'
2) Kreise (circle), attributname 'circle'
3) Polygone (polygone), attributname 'poly'
|
Schritt für Schritt: Die Vorgehensweise
 map definieren [Name vergeben]
Verweise mit 'area shape' definieren [innerhalb der map-Tags]
Image notieren [usemap-Attribut und alt-Tag-Attribut zwingend]
<map name="Beispiel">
<area shape="rect" ...
<area shape="circle" ...
<area shape="poly" ...
</map>
<img usemap="#Beispiel" alt="mein-image" src=" ...
Wie werden Verweisflächen festgelgt?
|
|
|
Wie Sie schon vermutet haben, sind wichtige Punkte in meinem Beispielbild nicht ohne Grund vorhanden.
Die Punkte werden wie in einem Koordinatensystem mit Abstand von links (x) und von oben (y) in Pixel gemessen und beziehen sich auf die linke obere Ecke des gesamten Bildes.
Der erste Punkt links oben im violetten Rechteck hat demnach die Koordinaten x=12 y=12 .
Er ist also jeweils 12 Pixel von der oberen Ecke entfernt.
|
Wie geht das nun genau?
Schauen Sie auf mein Beispielimage!
| für shape="rect" |
linke obere Ecke, rechte untere Ecke |
| für shape="circle" |
Mittelpunkt, Radius |
| für shape="poly" |
jeder Punkt des Polygons, in Reihenfolge
|
| für shape="rect" |
coords="x1,y1, x2,y2" |
| für shape="circle" |
coords="x1,y1, Radius" |
| für shape="poly" |
coords="x1,y1, x2,y2, x3,y3, x4,y4, ... "
|
(alle Angaben in Pixel, durch Komma getrennt)
Der vollständige Code für mein Beispiel
<map name="Beispiel">
<area shape="rect" coords="12,12,85,53" href="#" alt="Rechteck">
<area shape="circle" coords="110,86,33" href="#" alt="Kreis">
<area shape="poly" coords="7,78,50,76,74,139,13,140" href="#" alt="Polygon">
</map>
<img src="verweissensitiv00.gif" width="150" height="150" border="1"
alt="mein-image" usemap="#Beispiel">
So könnte Ihre Anwendung aussehen (aktives Beispiel)
(hier habe ich 2 MouseOver-Anweisungen und ein Alert-Script hinzugefügt)
Beispiele für Aktionen
an Stelle der Rauten [#] eintragen :
href="http://www.web-toolbox.net/htmldatei.htm" (Unterseite öffnen)
href="javascript:PopUpWindow()" (Fenster öffnen)
href="javascript:alertMeldung()" (Meldung anzeigen)
Zusätzlich im Link möglich: Mausaktionen
onMouseover="Tauschen1()" onMouseout="Tauschen2()"
|
WWW.WEB-TOOLBOX.NET
HTMLCode 
ZURÜCK 