Zurück ] Inhalt ] Weiter ]

Arbeiten mit Image-Maps

Links einer Grafik zuweisen

Im Kapitel über Hyperlinks wurde bereits gezeigt, wie man kompletten Grafiken einen Hyperlink zuordnen kann. Mit Image-Maps kann man bestimmten Bereichen einer Grafik einen Hyperlink zuordnen. Diese Bereiche werden auch Hotspots genannt. Beispielsweise kann man Bereichen einer Landkarte Informationen über den angeklickten Bereich zuordnen.

Kompatibilität von Imagemaps

Ab der HTML-Version 2.0 wurden die Bereiche einer Grafik, denen ein Hyperlink zugeordnet war, in einer speziellen Datei auf dem Webserver gespeichert. Für diese Dateien gab es verschiedenste Dateiformate, und man war auf die Unterstützung von CGI-Skripten durch den Webserver angewiesen. Dieser Ansatz wird hier nicht weiter beschrieben. Seit der HTML-Version 3.2 werden die Definitionen der "Hotspots" im HTML-Dokument selbst gespeichert, und die Image-Maps werden vom Browser des Benutzers verarbeitet. Dieser Ansatz scheint wesentlich robuster und flexibler zu sein. Allerdings unterstützen nur neuere Browser diese Art der Verarbeitung von Image-Maps. Ältere Browser werden die definierten Hotspots ignorieren.

Hotspots definieren

Möchte man Hotspots auf einer bereits eingefügten Grafik erstellen, so blendet man zunächst die Symbolleiste Grafik (Menüpunkt Ansicht/Symbolleisten/Grafik) ein. Als nächstes markiert man die Grafik. Dann kann man in der Symbolleiste auswählen, welche Form der Hotspot haben soll. Zur Auswahl stehen Rechteck, Kreis, oder Vieleck. Wenn man sich für eine Form für den Hotspot entschieden hat zeichnet man den Bereich auf der Grafik, der mit einem Hyperlink verknüpft werden soll. Nachdem der Bereich gezeichnet wurde, öffnet sich automatisch der Dialog zum Festlegen des Hyperlinks. Im Eingabefeld URL muß nur die Adresse der Verknüpfung angegeben werden.

Nachdem die Hotspots festgelegt wurden, kann man die Größe der Bereich noch verändern, in dem man den Hotspot markiert und an den Ziehpunkten am Rand der Markierung, die Größe des Hotspots verändert. Eine Hilfe beim Markieren der Hotspots ist die Schaltfläche Hotspots markieren, die sich ebenfalls in der Symbolleiste Grafik befindet. Klickt man auf diese Schaltfläche, so wird die Grafik ausgeblendet, und nur die Hotspots beleiben sichtbar.

Imagemaps und HTML

Frontpage erzeugt automatisch den HTML-Code für die Image-Maps. Im folgenden werden die HTML-Tags betrachtet, die Frontpage bei der Definition von Image-Maps verwendet.

Die Definition des Image-Maps wird zwischen den Tags <MAP> und </MAP> definiert. Eingeleitet wird die Definition des Image-Maps mit dem Tag <MAP NAME="map_name">. Das Attribut NAME ermöglicht es später, auf diese Map-Definiton zuzugreifen. Anschließend werden alle Hotspots aufgelistet. Jeder Bereich wird dabei mit dem Tag <AREA SHAPE="shape" COORDS="liste der coordinaten" HREF="url" alt="text als Alternative"> angegeben. Das Attribut SHAPE definiert die Form des Hotspots, wobei als Werte für shape circle, rect und polygon möglich sind. Das Attribut COORDS listet die Koordinaten des Hotspots innerhalb der Grafik auf. Der Beispiel-Code weiter unten zeigt die Unterschiede auf. Das Attribut HREF definiert den Hyperlink, der mit dem Hotspot verknüpft ist. Falls der Browser keine Grafiken anzeigt, ist es für den Benutzer nicht möglich, die Links des Image-Maps zu verwenden. Deshalb sollte man in jedem Fall auch das Attribut ALT angeben, das einen Text spezifiziert, der als Alternative für den Bereich des Hotspots angezeigt wird. Abgeschlossen wird die Definition des Image-Maps mit dem Tag </MAP>.

Das Bild muß mit der Definition des Image-Maps verknüpft werden. Die Definition des Bildes hat dabei die folgenden Aufbau: <IMG SRC="grafik.gif" WIDTH="X" HEIGHT="Y" USEMAP="map_name">. Beim Einfügen des Bildes muß also nur das zusätzliche Attribut USEMAP angegeben werden, das sich auf den Namen eine definierten Image-Maps bezieht. Zusammenfassend ist hier der Code für die Definition eines Image-Maps und eine Grafik angegeben: 

<map name="FPMap0">
     <area shape="circle" coords="83, 50, 28"
           href="#nord" alt="Nord">
     <area coords="92, 82, 146, 85, 114, 139, 97, 85"
           href="#sued" shape="polygon" alt="Sued">
     <area shape="rect" coords="149, 38, 175, 65"
           href="#empty" alt="Empty">
</map>

<img usemap="#FPMap0" src="amerika.gif" width="190" height="190">
 

Skript - MS Frontpage
[ Top Zurück ] Inhalt ] Weiter ] Norman May