Ein Imagemap besteht aus einem Bild, das mit einem <img />-Tag definiert wird. Dieser Tag erhält das Attribut usemap, welches auf die Imagemaps verweist. Die Imagemap besteht aus dem <map>-Tag sowie aus den einzelnen <area>-Tags, die die eigentlichen Definitionen der Felder darstellen, auf die geklickt werden kann.
Die verweissensitive Grafiken (Maps) bieteten die Möglichkeit, Hyperlinks innerhalb einer Grafik einzubetten. Diese werden mit der Variable shape= als rechteckige (rect), runde (circle) oder freie (poly) Schaltflächen realisiert. Die Koordinaten beziehen sich auf die Originalgröße des Bildes, nicht auf die verkleinerte Version.
Beispiel
Fahren Sie einmal mit dem Cursor über das linke Bild und Sie sehen dann, die entsprechenden Links, mit einem orangen Rahmen.
Das Viereck erhält 2 Punkte, die wiederum aus zwei
Koordinatenwerten p1=(x1,y1)
und p2=(x2,y2) bestehen.
-
- x1 – Abstand der linken oben Ecke in Pixel von links
- y1 – Abstand der linken oben Ecke in Pixel von oben
-
- x2 – Abstand der rechten unteren Ecke in Pixel von links
- y2 – Abstand der rechten unteren Ecke in Pixel von oben
Die Kreisschaltfläche besteht aus 3 Koordinaten
x1, y1, r1.
- x1 – Abstand des Kreis-Mittelpunkts von links in Pixel
- y1 – Abstand des Kreis-Mittelpunkts von oben in Pixel
- r1 – Radius des Kreises in Pixel
Das Polygon erhält jeweils 2 Koordinatenwerte
für einen Punkt x[n], y[n].
- x[n] – Abstand eines Punktes von links in Pixel
- y[n] – Abstand eines Punktes von oben in Pixel
Schaltflächen-Beschreibung des Imagemap-Assistent
- Datei Öffnen
-
-
Der Datei öffnen Dialog ist sehr einfach zu bedienen,
da er wie ein Windows-Standard-Dialog aufgebaut ist, und zusätzlich
eine Bildvorschau und Größenbeschreibung bietet.
- Neu Imagemap
-
-
ist nicht das was man vermutet, im Gegenteil,
es löscht alle definierten Area-Bereiche.
- Imagemap bearbeiten
-
-
Falls Sie mehrere Imagemaps auf Ihrer
Seite haben, können Sie zwischen den einzelnen Maps auswählen, welches
Sie bearbeiten möchten.
Hinweis:ist kein Bild geladen und Sie wählen ein Map
aus, wird eine Fehlermeldung erzeugt, die nicht an den Hersteller
weitergeleitet werden kann.
- Bereich auswählen
-
-
Hier können Sie einen Verweis-sensitiven
Bereich auswählen, um die URL zu ändern.
- Werkzeug wählen
-
-
Mit dieser Option können Sie Rechteck- und
Polygon-Bereiche nachträglich vergrößern und verkleinern, leider nicht
verschieben. Für Runde-Bereiche gibt es keine Option.
- Werkzeug: Rechteck
-
- Werkzeug zum Erstellen einer rechteckigen Fläche.
- Werkzeug: Kreis
-
- Werkzeug zum Erstellen einer runden Fläche.
- Werkzeug: Polygon
-
- Werkzeug zum Erstellen einer unregelmäßigen Fläche.
Nach Aufruf des Assistenten, drücken Sie den ersten Button, um
die Grafik (Bild) zu laden. Im unteren Bereich finden wir das
map/name-Attribut, das sich mit jedem neuen Map
anpasst. Ändern Sie diesen in einen aussagekräftigen Namen.
Der nächste Schritt ist die Auswahl des richtigen Werkzeugs. Es
stehen, wie schon oben erwähnt, drei zur Verfügung. Bei
der Rechteck- (rect) und Runde-Schaltfläche (circle) klicken Sie
ins Bild und ziehen den entsprechenden Ramen auf. Nur beim
Polygon klicken Sie den Umriss solange an, bis Sie den Anfang
wieder erreicht haben. Dort beenden Sie die Auswahl mit einem
Doppelklick.
Es erscheint eine Eingabe-Box in die Sie die zu verlinkende
Seite eingeben. Der Assistent schraffiert daraufhin die Fläche
und trägt den Link ein. Ein Klick auf die Schaltfläche
Ok fügt den Code ein.
Imagemap-Assistent Ausgabe-Code
highlight- as: html
<map name="imagemap">
<area shape="rect" coords="32,84,163,103" href="Suchen" alt="" >
<area shape="rect" coords="32,125,183,144" href="Ersetzen" alt="" >
<area shape="" coords="7,182,23,198" href="Markierter-Text" alt="" >
<area shape="" coords="7,216,23,231" href="Aktuelle Datei" alt="" >
<area shape="poly" coords="5,58,95,58,95,39,164,39,164,57,166,58,230,58,230,266,226,
267,226,63,4,63,4,59,5,58,5,57,5,57"
href="Register-Karte" alt=" >
</map>
Bearbeiten des eingefügten Code
Imagemap-Assistent
bearbeiteter-Code highlight-
as: html <map name="imagemap">
<area shape="rect" coords="32,84,163,103" href="/?p=1696#Suchen" alt="Suchen" >
<area shape="rect" coords="32,125,183,144" href="/?p=1696#Ersetzen" alt="Ersetzen" >
<area shape="circle" coords="15,190,8" href="/?p=1696#Markierter-Text"
alt="Markierter-Text" >
<area shape="circle" coords="15,206,8" href="/?p=1696#Aktuelle Datei"
alt="Aktuelle Date" >
<area shape="poly" coords="5,58,95,58,95,39,164,39,164,57,166,58,230,58,230,266,226,
267,226,63,4,63,4,59,5,58,5,57,5,57"
href="/?p=1696#Register-Karte"
alt="Register-Karte" >
</map>
<img src="http://gabischatz.bplaced.net/scriptly/ersetzen-236x270.png"
usemap="#imagemap"
alt="Imagemap" title="Imagemap"
style="margin-left: 5px; margin-right:
5px; margin-top: 5px; margin-bottom: 5px;"
>
Nun erkläre ich die einzelnen Schritte:
- Ich beginne mit Zeile 9. Der wichtigste Tag der noch fehlt, ist der
<img />-Tag mit dem Attribut usemap.
Dasmap/name-Attribut wird in das usemap-Attribut
eingetragen und bekommt eine vorangestellte # (Raute).
- Nun müssen Sie alle
alt-Attribut mit einem Beschriftungstext
versehen.
- Die
href-Attribute müssen ebenfalls ergänzt werden.
- Bei den Kreisschaltflächen haben sich zwei kleine Fehler
versteckt, die Sie ebenfalls korrigieren müssen.
-
- Das
shape-Attribut erhält den Wert
circle, siehe Zeile 4 und 5.
- Der Imagemap-Assistent zeigt Ihnen den aktuellen Koordinaten-Punkt
(rote Fläche) in der rechten unteren Ecke an, siehe Bild rechts.
Nun brauchen Sie nur noch den Radius eintragen und Sie sind fertig.
Falls Sie dem Benutzer einen Hinweis geben möchten, dass es sich um eine Verweis-sensitive Grafik (Bild) handelt, empfehle ich Ihnen noch das title-Attribut einzufügen und die Grafik zu beschriften.
