Zurück || Weiter Index Startseite
HTML Einführung: Image-Maps
Mehrere Hypertextlinks in einer Grafik definieren

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Mehrere Verweise in einer Grafik
  2. Der Map-Eintrag
  3. Grafik mit Map verknüpfen

Allgemeines

Nachdem wir im letzten Kapitel die verschiedenen Arten von Verweisen besprochen haben, kümmern wir uns nun um mehrfache Verweise in einer Grafik. Wir werden erfahren, wie man einer Grafik Bereiche zuordnen kann, die wie Verweise arbeiten. - Das kann ja oft viel schöner (und übersichtlicher!) sein, als lange Listen von Verweis-Texten...

Mehrere Verweise in einer Grafik

Neben den bisher besprochenen Verweisen (Text bzw. Grafik) gibt auch die Möglichkeit, in einer Grafik mehrere Verweise einzuführen. Dabei werden für die betroffene Grafik Aktivierungflächen (engl. Hotspots) definiert, die auf andere Ressourcen verweisen können.

Die Aktivierungsflächen müssen in einem Map-Eintrag definiert werden, der die Grafikbereiche beschreibt und den zugehörigen Verweis angibt. Zur Festlegung der Grafikbereiche benötigt man ein Programm, mit dem man die XY-Koordinaten einzelner Grafikpunkte ausmessen kann (z.B. ein Grafikprogramm).

Der Map-Eintrag

Zunächst suchen wir uns also ein passendes Bild, in welches wir unsere Verweise aufnehmen wollen. Jede Aktivierungsfläche wird im Map-Eintrag in einer Zeile beschrieben. Der Aufbau dieses Eintrages sieht wie folgt aus:

<map name="computerkarte">
 <area shape="rect" coords="2,5,160,75" href="beispiel8a.html#Gedicht">
 <area shape="circle"
   coords="250,120,70" href="beispiel8a.html#Beratung">
 <area shape="poly" coords="70,100,130,90,140,180,70,160"
   href="beispiel8a.html#Abacus">
</map>

Das Tagpaar <map>...</map> klammert die Karte (engl. Map) ein. Jede Karte benötigt einen Namen, mit dem sie im HTML-Dokument angesprochen werden kann. Ein Hotspot wird durch das <area>-Tag definiert, dessen Format wie folgt aussieht:

    <area shape="Umriss" coords="Koordinaten" href="URL">
Dabei kann eine Aktivierungsfläche eine der folgenden Umrisse (mit den dazugehörigen Koordinaten) annehmen:

Arten von Umrissen (engl. shape) und deren Koordinaten
Umriss Bedeutung Koordinaten
 rect  Rechteck  x1,y1,x2,y2 - Linker oberer und rechter unterer Eckpunkt
 circle  Kreis  x1,y1,r0 - Kreismittelpunkt und Radius des Kreises
 poly  Polygon  x1,y1,x2,y2,... - beliebig viele Punkte, geradlinig verbunden

URL ist der Verweis auf eine Datei, Internetadresse u.dgl. - Diese URL wird angesprochen, wenn die entsprechene Verweisfläche aktiviert, sprich angeklickt, wird.

Die Grafik mit der Map verknüpfen

Um die Grafik mit der entsprechenden Karte zu verknüpfen, nutzen wir eine weitere Optionen des Image-Tags:
    <img src="Datei" usemap="#Kartenname">
legt fest, dass die Karte Kartenname, die mit <map name="Kartenname">....</map> definiert wurde, für die Grafik Datei genutzt wird.

Verknüpfen wir also unsere oben definierte Karte mit unserer Grafik:
<img src="computer.gif" usemap="#computerkarte">

Hinweis: Wenn Sie die Grafik skalieren (d.h. größer oder kleiner machen), so müssen Sie zur Erstellung der Map-Einträge die skalierte (vergrößerte/verkleinerte) Grafik in Betracht ziehen!

Zusammenfassung und Beispiel

Das folgende HTML-Fragment erlaubt es uns nun das darunter folgende Bild zusammen mit dem oben bereits definierten Map-Eintrag mit Hotspots zu versehen:

<img src="computer.gif" alt="Maps überm Computer"
 width=330 height=202 border=3 usemap="#computerkarte">

Maps überm Computer

Tip: Im Web-Browser können Sie mit [Tab] (Tabulator) von einem Link zum nächsten springen. - Am Bild wird dann die Map-Area strichliert umrandet. Probieren Sie's mal!

Im nächsten Kapitel beschäftigen wir uns mit den restlichen HTML-Tags.

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner