Imagemaps

Imagemaps sind Bilder, bei denen bestimmte Bereiche Links enthalten. Die Form und Größe dieser Bereiche lässt sich beliebig fest legen.

Oben siehst du den Quellcode für das Beispiel unten. Mit map (engl. - Landkarte) fängt der Bereich an, in dem die Linkbereiche definiert werden. Als erstes musst du einen Namen für die Imagemap vergeben. Dieser Name hat nichts mit dem Dateinamen zu tun. Er ist notwendig, damit das Bild die Definition unter diesem Namen aufrufen kann. Der Name muss einmalig sein und darf nur aus Buchstaben, Ziffern und dem Unterstrich ( _ ) bestehen. Einmals heißt, dass du zwar beliebig viele Bilder und beliebig viele Imagemaps auf einer Seite verwenden kannst, es darf aber jeden Namen für eine Immagemap auf jeder Seite nur ein mal geben. Es ist aber möglich diese Imagemap für mehrere Bilder zu verwenden.

Dann folgen die einzelnen Bereiche. Für jeden Bereich musst du ein Tag nach dem Schema <area shape=Form coords="Koordinaten" href="Verweisziel" target="Darstellungsziel"> schreiben. area heißt "Bereich" oder "Zone". shape heißt "Form". Hier gibst du die Form des Bereiches an. Möglich ist rect, circle und polygon. rect steht dabei für "rectangle". Das heißt "Rechteck". Hier wird also ein rechteckiger Bereich beschrieben. Die Kanten dieses Rechtecks sind übrigens immer waagerecht und senkrecht. circle heißt Kreis. Hier wird ein runder Bereich beschrieben. polygon beschreibt einen vieleckigen Bereich. coords steht für "coordinates". Das heißt natürlich "Koordinaten". Hier werden die Koordinaten für die Bereiche eingetragen. Die anderen Kürzel kennst du schon von den "normalen" Links. Sie heißen hier nicht nur genau so, sie haben auch die selbe Funktion wie dort.

	Für rechteckige Bereiche musst du 4 Koordinaten angeben: 1. Den Abstand vom linken Bildrand zur linken oberen Ecke des Bereiches in Pixel, 2. den Abstand vom oberen Bildrand zur linken oberen Ecke des Bereiches in Pixel, 3. den Abstand vom linken Bildrand zur rechten unteren Ecke des Bereiches in Pixel und 4. den Abstand vom oberen Bildrand zur rechten unteren Ecke des Bereiches in Pixel. Die Koordinaten werden durch Kommas von einander getrennt.
	Für runde Bereiche musst du 3 Koordinaten angeben: 1. Den Abstand des Bereichsmittelpunktes vom linken Bildrand in Pixel, 2. den Abstand des Bereichsmittelpunktes vom oberen Bildrand in Pixel und 3. den Radius des Bereiches. Die Koordinaten werden durch Kommas von einander getrennt.
	Für vieleckige Bereiche musst du für jede Ecke 2 Koordinaten angeben: 1. Den Abstand der Bereichsecke vom linken Bildrand in Pixel und 2. den Abstand der Bereichsecke vom oberen Bildrand in Pixel. Die Koordinaten werden durch Kommas von einander getrennt. Du kannst so viele Ecken angeben wie du willst. Natürlich kann dabei eine recht lange Reihe mit Koordinaten entstehen. Wie du sehen kannst habe ich im Beispiel oben viele Koordinaten weg gelassen und durch Punkte ersetzt. Der Kasten für den Beispielcode wäre sonst extrem breit geworden.

Nach href kommen die Linkadressen. Sie werden genau so angegeben, wie bei normalen Links.

Wenn alle Bereiche definiert sind, wird der Imagemapbereich mit </map> beendet. Dieser ganze Bereich muss nicht unbedingt in der selben Datei wie das HTML-Dokument, in dem er benutzt wird definiert werden.

An der Stelle, wo das Bild erscheinen soll das die Imagemap benutzen soll, musst du im Quelltext zunächst das Bild einbinden. Das <img>Tag wird dann um usemap="Name und Adresse der Imagemap" erweitert. usemap kommt vom englischen "use map" und heißt "benutze Landkarte". Die Adressangabe funktioniert genau wie bei Links auch. Meist ist die Imagemap im selben Dokument definiert. Dann beginnt die Adresse der Imagemap mit einem "#" gefolgt vom Namen der Imagemap. Es ist auch dann die selbe Syntax wie bei den Links. Erinnere dich: Auch Linkadressen mit Zielen innerhalb der selben Seite beginnen mit "#" (siehe Kapitel "Hyperlinks", Absatz "Textlink auf eine Textmarke").

Das <area>Tag kann durch Universalattribute erweitert werden. Besonders interessant ist hier das Universalattribut "title".

Fahre mit der Maus über das Bild. Am Mauszeiger erkennst du die Stellen an denen ein Linkbereich ist. Probier die Links ruhig aus. Die Zielseiten werden jeweils in einem neuen Fenster geöffnet.

Weiter geht's mit dem Thema Frames.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: