 Image-Maps 01 - verweissensitive Flächen,
Alternativ zum Textlink oder auch zum Imagelink (das gesamte Bild kann angklickt werden) bietet sich die Möglichkeit bestimmte Bereiche (hot spots) innerhalb einer Grafik als Verweisfläche zu deklarieren.
|
|
Bestimmte Bereiche einer Grafik als Verweisfläche definieren
Beispiel: Grafik als Untermenü zum Thema Infrastruktur.
Es handelt sich hier nicht um 8 einzelne Grafiken und (darunter) 8 Textlinks sondern um eine einzige Grafik. Rand anzeigen Für diese Grafik habe ich 8 "HotSpots" festgelegt, die angeklickt zur jeweiligen Seite weiterleiten (öffnen hier in einem neuen Browserfenster).
Übrigens finden Sie solche Piktogramme und weitere 7000 Mini-Images zur kostenlosen Verwendung in meiner  Mini-Image-Box 
Image-Map
Die allgemeine Bezeichnung für eine solche Grafik mit einem oder mehr verweissensitiven 'Hot-Spots' ist: Image-Map
Dazu wird die Grafik zunächst mit dem üblichen <img>-Tag in die Seite eingebunden. Dann muss unbedingt das zusätzliche Attribut 'usemap' notiert werden. Sie wählen einen Namen, dem Sie ein Gatterzeichen (#) voranstellen und als Wert eintragen.
<img usemap="#Symbole" alt="Nav" src="nav-infra.gif" width="525" height="75" ... >
Dann sind Anweisungen notwendig, die bestimmte Bereiche dieser Grafik als verweissensitive Flächen festlegen. Wie das funktioniert lesen sie weiter unten.
Funktionsprinzip
Erst einmal zu den grundsätzlichen Erklärungen:
|
|
(blaue Begriffe merken)
Das gesamte Image (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) Vielecke (polygone), attributname 'poly'
|
Anweisungen für eine Imagemap
3 Schritte:
1 Eine Map definieren [vergebenen Namen eintragen]
2 Verweisbereiche mit 'area shape' definieren [innerhalb der map-Tags]
<map name="Beispiel">
<area shape="rect" ...
<area shape="circle" ...
<area shape="poly" ...
</map>
Diese Anweisungen in der Map beziehen sich auf die Grafik, bei der Sie das Attrribut 'usemap' mit dem gleichen Bezeichner (hier 'Beispiel') eintragen werden.
3 <img>-Tag notieren [usemap-Attribut und alt-Tag-Attribut zwingend]
<img usemap="#Beispiel" alt="mein-image" src=" ...
Verweisfläche (area) festgelegen
|
|
|
Wie Sie schon vermutet haben, sind wichtige Punkte in meiner Beispielgrafik 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 der Grafik.
Der erste Punkt links oben im violetten Rechteck hat demnach die Koordinaten x=12 y=12 .
Er ist also von der oberen linke Ecke gemessen um 12 Pixel nach rechts und nach unten versetzt.
|
Einträge für Rechteck, Kreis und Vieleck (rect, circle, poly)
Abhängig von der Form der verweissensitiven Bereiche, müssen die Angaben eingetragen werden.
- Für ein Rechteck genügen zwei Angaben für die gegenüberliegenden Ecken (jeweils X- und Y-Wert).
- Für einen Kreis tragen sie die Koordinaten für den Mittlelpunkt ein und notieren eine weitere Angabe für den Radius (nsgesamt also 3 Werte).
- Für ein Vieleck ist die Notierung anders: Für jeden Punkt tragen sie X- und Y-Wert paarweise ein.
Schauen sie einmal auf meine Beispielgrafik
| 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">
An Stelle der '#' wird der Dateiname (oder ein Aktionsaufruf) eingetragen.
So könnte Ihre Anwendung aussehen (aktives Beispiel)
(hier habe ich 2 MouseEvent-Anweisungen und ein Alert-Script hinzugefügt)
Beispiele für Aktionen
Sie können nun mit bestimmten Aktionen entsprechende Ereignisse auslösen. Beim Klicken, bei MouseOver, ... . Wenn sie eine URL eintragen, wird ein Mausklick diese Datei aufrufen. Sie können allerdings auch eine JavaScript-Funktion eintragen, die eine einzelne oder eine Reihe von Anweisungen beinhaltet und entsprechende Aktionen auslöst.
<area shape="rect" coords="12,12,85,53" href="#" alt="klick mich">
An Stelle der Raute [#] eintragen :
dateiname.htm (Unterseite öffnen)
ordner/dateiname.htm (Unterseite öffnen)
http://www.clickstart.de (Webseite aufrufen)
javascript:alert() (Meldung anzeigen)
javascript:Funktionsname() (Funktion aufrufen)
Zusätzlich möglich: MausEvents
Sie können zusätzlich auch Anweisungen für MouseEvents eintragen:
onMouseover="GrafikAnzeigen()" onMouseout="GrafikAusblenden()"
Aufbauend auf dieses Beispiel, bei dem in der Regel eine Datei geöffnet werden soll, zeige ich beim Beispiel Image-Map 02 wie beim Anklicken eine Funktion zum Öffnen eines PopUp-Windows aufgerufen wird.
|
Home • Verweise • Image-Maps 01
DOWNLOAD
