vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


Was ist ein Abbildungsplan?

Erzeugen Sie Server-seitige Abbildungspläne

Client-seitige Abbildungspläne erzeugen

Erzeugen von Webseiten, die beide Typen von Abbildungsplänen unterstützen

Zusammenfassung

Fragen und Antworten



Tag 9


Kapitel 17 - Imagemaps

Imagemaps (Abbildungspläne) sind spezielle Arten von anklickbaren Bildern. Wenn Sie normalerweise ein Bild innerhalb eines Links einbetten, gelangen Sie zu einem einzigen Ort, wenn Sie das Bild irgendwo anklicken. Mit Abbildungsplänen können Sie zu verschiedenen Orten gelangen, je nachdem, welche Stelle innerhalb des Bildes Sie angeklickt haben. In diesem Kapitel werden Sie alles über Abbildungspläne und wie Sie sie erzeugen können lernen, einschließlich:



Was ist ein Abbildungsplan?

In Kapitel 7, »Die Verwendung von Bildern, Farben und Hintergründen«, haben Sie erfahren, wie eine Abbildung zugleich auch als Verknüpfung dienen kann, nämlich einfach, indem Sie die <IMG>-Kennung innerhalb eines <A>-Tags verwenden. Auf diese Weise wird die ganze Abbildung zu einer Verknüpfung; Sie könnten die Abbildung anklicken, den Hintergrund oder den Rahmen, alles hätte denselben Effekt.


Bei einem Abbildungsplan (Imagemap) aktivieren verschiedene Teile der Abbildung unterschiedliche Verknüpfungen (Abbildung 17.1). Mit Hilfe von Abbildungsplänen könnten Sie eine verknüpfte Landkarte erzeugen, die mit Seiten verbunden ist, die die jeweilige Region beschreiben, die Sie anklicken (siehe Abbildung 17.1). Oder Sie könnten visuelle Metaphern für die von Ihnen präsentierten Informationen erstellen: ein paar Bücher im Regal oder eine Fotografie, bei der jede abgebildete Person einzeln beschrieben wird.


siehe Abbildung

Abbildung 17.1:
Abbildungspläne: unterschiedliche Orte, unterschiedliche Verbindungen

Abbildungspläne sind spezielle Bilder, in denen unterschiedliche Regionen auf unterschiedliche Verknüpfungsorte hinzeigen. Wohin Sie sich auf dem Site bewegen, ist abhängig von der Stelle, die Sie auf dem Bild anklicken.

Traditionsgemäß werden Abbildungspläne von einem speziellen Programm erzeugt, das sich auf dem Server befindet. Solche Abbildungspläne werden als Server-seitige Abbildungspläne bezeichnet.


Server-seitige Abbildungspläne benötigen zu ihrer Ausführung eine Abbildung, die vom Client dargestellt wird, und ein Programm, das auf dem Server läuft.

Wenn ein Browser ein Link auf einem Abbildungsplan aktiviert, ruft er ein spezielles Abbildungsplan-Programm auf, das auf dem Web-Server gespeichert ist. Zusätzlich dazu, daß der Browser das Abbildungsplan-Programm aufruft, sendet er ihm auch noch die x- und y-Koordinaten der Position auf dem Bild, an die mit der Maus geklickt wurde. Das Abbildungsplan-Programm sucht dann nach einer speziellen Plandatei, in der die Regionen auf dem Bild bestimmten URLs zugeordnet werden, vollführt dann einige Berechnungen, um herauszufinden, welche Seite geladen werden soll, und lädt dann die entsprechende Seite.


Server-seitige Abbildungspläne gehören zu den ersten Web-Features und werden von den meisten, wenn auch nicht von allen, grafischen Browsern unterstützt.



Client-seitige Abbildungspläne

Obwohl Server-seitige Abbildungspläne seit geraumer Zeit gebräuchlich sind, haben die damit verbundenen Probleme zur Entwicklung eines neuen Typs von Abbildungsplan geführt, dem Client-seitigen Abbildungsplan. Folgendes sind die hauptsächlichen Probleme, die mit Server-seitigen Abbildungsplänen verbunden sind:


Client-seitige Abbildungspläne beseitigen alle diese Schwierigkeiten, indem sie die Notwendigkeit für ein spezielles Abbildungsplan-Programm auf dem Server auflösen. Statt dessen führen sie die gesamte Abbildungsplan-Verarbeitung lokal auf dem Browser selbst aus.


Client-seitige Abbildungspläne funktionieren genauso wie die Server-seitigen, abgesehen davon, daß sie kein zusätzliches Programm auf dem Server benötigen. Die gesamte Verarbeitung der Koordinaten und Verweise auf andere Orte vollzieht sich im Browser.

Client-seitige Abbildungspläne werden momentan nur von sehr wenigen der allerneuesten Web-Browser unterstützt, einschließlich Netscape 2.0. Der Vorschlag für Client-seitige Abbildungspläne hat Eingang in HTML 3.2 gefunden und ist damit Teil der offiziellen Spezifikation.


Abbildungspläne und Textbasierte Browser

Aufgrund der an sich grafischen Natur von Abbildungsplänen funktionieren diese nur mit grafischen Browsern. Wenn Sie versuchen, ein Dokument mit einem Abbildungsplan darin mit einem textbasierten Browser wie Lynx anzusehen, erhalten Sie noch nicht einmal einen Hinweis darauf, daß das Bild überhaupt existiert. (Es sei denn, daß das Bild ein ALT-Attribut enthält.) Aber auch mit dem ALT-Attribut werden Sie nicht in der Lage sein, die Abbildung zum Navigieren zu benutzen, wenn Sie keinen grafischen Browser haben.


Wenn Sie sich entschließen, eine Webseite mit einem Abbildungsplan darin zu erstellen, ist es doppelt wichtig, daß Sie auch ein Textgegenstück anbieten, damit die vielen Leser mit textbasierten Browsern Ihre Seite benutzen können. Durch die Verwendung von Abbildungsplänen können Sie Leser mit textbasierten Browsern sehr effizient von Ihren Seiten ausschließen; haben Sie ein Einsehen, und ermöglichen Sie denen, die nicht an hübschen Bildchen, sondern lediglich an Informationen interessiert sind, wenigstens ein paar Wege, um Ihre Inhalte anzusehen.



Erzeugen Sie Server-seitige Abbildungspläne

Abgesehen von den verschiedenen Nachteilen, die die Verwendung von Server-seitigen Abbildungsplänen mit sich bringt, gibt es da noch einen, der meine Erklärungen weiter kompliziert: Fast jeder Web-Server benutzt eine unterschiedliche Methode, um die Abbildungspläne herzustellen. Die Methoden unterscheiden sich sogar zwischen den einzelnen Servern auf der gleichen Plattform. So haben z.B. der W3C(CERN)-HTTPD-Server und der NCSA-HTTPD-Server nichtkompatible Methoden der Durchführung von Abbildungsplänen. Alle Server verwenden jedoch die gleichen grundlegenden Zutaten für Abbildungspläne:


Der folgende Abschnitt erklärt, wie man anklickbare Bilder im allgemeinen erzeugt, seine Beispiele beziehen sich jedoch auf Server, die sich an die Methoden von NCSA HTTPD halten, wie NCSA selbst oder Apache. Wenn Sie mehr Informationen über Ihren Server benötigen, sehen Sie sich die Dokumentation an, die Sie mit Ihrem Server erhalten haben, oder bitten Sie Ihren Web-Administrator um Rat.



Ein Bild finden

Um einen Abbildungsplan zu erstellen, benötigen Sie eine Abbildung. Die Abbildung, die als Plan dienen soll, ist am brauchbarsten, wenn sie mehrere visuell abgegrenzte Bereiche hat, die einzeln ausgewählt werden können, zum Beispiel Bilder mit mehreren Symbol-Elementen oder Bilder, die leicht in Polygone (Vielecke) zerlegt werden können.


Fotografien ergeben schwierige Abbildungspläne, weil ihre einzelnen »Elemente« dazu neigen, ineinander überzugehen oder ungewöhnliche Formen haben. Die Abbildungen 17.2 und 17.3 zeigen Beispiele von guten und schlechten Bildern für Abbildungspläne.


siehe Abbildung

Abbildung 17.2:
Ein gutes Bild für einen Abbildungsplan

siehe Abbildung

Abbildung 17.3:
Ein weniger gutes Bild für einen Abbildungsplan


Erzeugen einer Plandatei

Das Herzstück des Server-seitigen Abbildungsplans ist eine Plandatei. Um eine Plandatei zu erzeugen, skizzieren Sie zuerst die Regionen in Ihrem Bild, die anklickbar sein sollen, bestimmen dann die Koordinaten dieser Regionen und entscheiden dann, mit welchen HTML-Seiten die kartographierten Regionen verknüpft werden sollen.


Das Format der Plandatei hängt von dem Abbildungsplan-Programm ab, das Sie auf Ihrem Server verwenden. In diesem Abschnitt werde ich über die Abbildungspläne des NCSA-HTTP-Servers und die Plandateien, die er standardmäßig verwendet, reden. Wenn Sie einen anderen Server verwenden, haben Sie vielleicht andere Abbildungsplan-Programme und können zwischen anderen Abbildungsplan-Formaten wählen. Wenn Sie vor diesem Problem stehen, fragen Sie Ihren Web-Administrator, oder lesen Sie sich die Server-Dokumentation aufmerksam durch.

Sie können eine Plandatei entweder herstellen, indem Sie Regionen skizzieren und dann die Koordinaten von Hand notieren, oder indem Sie ein Programm anwenden, das Abbildungspläne erzeugt. Die letztere Methode ist einfacher, da das Programm die Plandatei automatisch generieren wird, indem es die Koordinaten der Regionen festhält, die Sie mit der Maus gezeichnet haben.


Des weiteren können Ihnen die Programme Mapedit und MapThis für Windows und WebMap für den Macintosh (die übrigens alle auf der Buch-CD enthalten sind) dabei helfen, Plandateien im NCSA-Format zu erzeugen. MapThis enthält außerdem auch noch eine Unterstützung für die Erstellung von Client-seitigen Abbildungsplan-Definitionen. (Lesen Sie die Dokumentation, die auf der CD-ROM enthalten ist, wenn Sie Näheres über die Anwendung dieser Programme herausfinden möchten.)

Darüber hinaus bieten die meisten der aktuellen WYSIWYG-Editoren für HTML Möglichkeiten zur Erzeugung von Imagemaps an.


Wenn Sie ein Unix-basiertes System benutzen, können Sie eine Version von Mapedit via FTP beziehen (siehe Anhang B, »Übersicht der HTML-Sprache«, für eine vollständige Liste diesbezüglicher FTP-Sites).


In Tabelle 17.1 finden Sie eine Liste aktueller Tools zur Erzeugung von Imagemaps.


Tabelle 17.1: Sofware zur Erstellung von Imagemaps.

Name

Plattform

URL

Web HotSpots

Windows

HTTP://www.concentric.net/
~automata/hotspots.html

Imaptool

Linux/X-Window

http://www.sci.fi/~uucee/
ownprojects/

MapThis

Windows

http://galadriel.ecaetc.ohio-state.edu/tc/mt/

LiveImage

Windows

http://www.mediatec.com

Mapedit

Windows/Unix

http://www.boutell.com/mapedit/

Poor Person's Image Mapper

Basiert auf dem Web

http://zenith.berkeley.edu/~seidel/ClrHlpr/imagemap.html

Wenn Sie Ihre Plandatei in einem anderem Format benötigen, können Sie immer eines der Hilfsprogramme einsetzen, um einen einfachen Plan herzustellen, und dann die Koordinaten, die Sie erhalten, in das Plandatei-Format, das Ihr Server benötigt, umwandeln.


Wenn Sie Ihre Plandateien von Hand herstellen wollen, zeige ich Ihnen hier, wie das geht. Zuerst skizzieren Sie die Regionen, die Sie auf dem Bild aktivieren wollen (wie z.B. in Abbildung 17.4).


siehe Abbildung

Abbildung 17.4:
Skizzieren der kartographierten Regionen

Als nächstes müssen Sie die Koordinaten der Endpunkte dieser Regionen bestimmen (siehe Abbildung 17.5). Die meisten Bildverarbeitungsprogramme bieten eine Option, die die Koordinaten der aktuellen Cursor-Position angibt. Verwenden Sie dieses Feature, um die jeweiligen Koordinaten zu notieren. (Alle bisher erwähnten Abbildungsplan-Programme werden zwar diese Plandatei für Sie erzeugen, in der Zwischenzeit sollten Sie diese Schritte aber von Hand ausführen, um den Vorgang besser zu verstehen.)


siehe Abbildung

Abbildung 17.5:
Die Koordinaten finden

Der Ausgangspunkt 0,0 bezeichnet die linke obere Ecke der Abbildung, und positive Y-Werte führen nach unten, positive X-Werte nach rechts.

Sie haben damit schon mehr als die Hälfte des Weges hinter sich. Der letzte Schritt besteht darin, einige URLs zusammenzustellen, mit einer URL pro Region, die ausgewählt werden kann. Sie können mehrere Regionen auf dieselbe URL verweisen lassen, aber jede Region darf nur eine Verknüpfung haben.


Mit all Ihren notierten Regionen, Koordinaten und URLs können Sie jetzt eine Plandatei für Ihren Server schreiben. NCSA-HTTP-Plandateien sehen folgendermaßen aus:


default URL
circle URL x,y radius

rect URL x,y x,y
poly URL x1,y1 x2,y2 ... xN,yN
point URL x,y


Die Plandateien für Ihr spezielles Abbildungsplan-Programm für Ihren Server sehen vielleicht anders aus, haben aber die gleichen grundlegenden Komponenten. Ersetzen Sie die Werte für die Koordinaten durch die, die Sie im vorherigen Abschnitt notiert haben, an jeder der x- oder y-Positionen (oder x1, y1 usw.). radius (in der circle-Zeile) bezeichnet den Radius der Kreis-Region.


Die URLs, die Sie angeben, müssen entweder absolute URLs (beginnend mit http oder ftp oder einem anderen Protokoll) sein, oder es muß sich dabei um einen vollständigen Pfad-Namen zu den Dateien (auf Ihrem Server) handeln, mit denen Sie eine Verbindung herstellen wollen, d.h. alles, was Sie hinter den Host-Teil eines URL schreiben könnten. Sie können jedoch in Plandateien keine relativen Pfad-Namen verwenden. Hier ein Beispiel für eine NCSA-Plandatei:


circle /www/mapping.html 10,15 20
circle /www/mapping.html 346,23 59
poly /www/test/orange.html 192,3 192,170 115,217
rect /www/pencil.html 57,57 100,210
point /www/pencil.html 100,100
point /www/orange.html 200,200


Punkte (points) in Plandateien für NCSA-Server erlauben Ihnen zu bestimmen, daß ein Maus-Klick, der nicht direkt in einer der Regionen landet, den nächstgelegenen Punkt aktiviert. Punkte sind nützlich bei Fotografien oder anderen Bildern mit schlecht abgrenzbaren Elementen oder wenn eine bessere Differenzierung erreicht werden soll als bloß »alles, was nicht in einer Region ist«.


Die Reihenfolge der Regionen in der Plandatei ist wichtig; je weiter oben eine Region in der Datei steht, desto höher ist ihre Priorität, wenn sie ausgewählt wird. Wird ein Teil einer Region angewählt, der in überlappenden Bereichen verschiedener Regionen liegt, dann wird die erste in der Plandatei aufgeführte Region aktiviert.


Schließlich kann auch die Plandatei für NCSA-Server eine default-Region enthalten, ohne Koordinaten und lediglich mit einem URL. Diese Vorgabe wird verwendet, wenn ein Punkt der Abbildung angewählt wird, der in keiner Region enthalten ist; dieser Eintrag bietet also eine Verbindung für all jene Teile der Abbildung, die in keiner besonderen Region enthalten sind. (Beachten Sie, daß Sie keine Punkte (points) einfügen sollten, wenn Sie bei NCSA HTTPD eine default-Region in Ihre Plandatei aufnehmen. Die Existenz von point-Elementen schließt einen default-Eintrag aus.) Hier ist ein Beispiel für die Verwendung von default.



Installieren der Plandatei und des Abbildungsplan-Programms

Die Plandatei zu erzeugen ist der schwierigste Teil bei der Herstellung eines Abbildungsplans. Nachdem Sie eine Plandatei für Ihr Bild geschrieben haben, müssen Sie sowohl die Plandatei als auch das Abbildungsplan-Programm auf Ihrem Server installieren und dann alles mit Ihren HTML-Dateien verknüpfen, um den Abbildungsplan benutzen zu können.


Speichern Sie Ihre Plandatei unter einem beschreibenden Namen (sagen wir unter meinbild.map). Wo Sie die Plandatei auf Ihrem Server speichern, ist nicht wichtig, ich ziehe es aber vor, meine Plandateien in einem zentralen Verzeichnis namens maps auf der obersten Ebene meiner Web-Dateien zu speichern.


Sie müssen auch Ihr Abbildungsplan-Programm auf dem Server installieren, meistens in einem speziellen Verzeichnis namens cgi-bin, das speziell dafür eingerichtet wurde, Programme und Skripts für Ihren Server zu speichern (Sie werden mehr über das cgi-bin-Verzeichnis in Kapitel 19, »Grundlagen von CGI-Skripting«, herausfinden. Die meisten Server haben ein standardmäßiges Abbildungsplan-Programm eingerichtet, das Ihnen meistens auch auf einem fremden Server zur Verfügung steht. Halten Sie nach einem Programm namens htimage oder imagemap Ausschau.


Seien Sie vorsichtig, wenn es sich um einen NCSA-Server und ein Abbildungsplan-Programm handelt. Ältere Versionen des Abbildungsplan-Programms waren umständlicher und brauchten eine Extra-Konfigurationsdatei; das Programm, das mit der 1.5-Version des Servers geliefert wird, funktioniert viel besser. Wenn Sie die neueste Version des NCSA-Servers nicht zur Verfügung haben, können Sie das neue Abbildungsplan-Programm unter http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagmap.txt erhalten.


Alles miteinander verknüpfen

Jetzt haben Sie also ein Bild, eine Plandatei und ein Abbildungsplan-Programm. Lassen Sie uns jetzt alles miteinander verbinden. In Ihrer HTML-Seite, die den Abbildungsplan enthält, werden Sie die <A>- und <IMG>-Tags zusammen einsetzen, um den Effekt eines anklickbaren Bildes zu erzielen. Hier ist ein Beispiel, das das Abbildungsplan-Programm von NCSA verwendet:


<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" ISMAP></A>


Beachten Sie verschiedene Eigenheiten dieses Links. Erstens wird das Link zum Abbildungsplan-Skript (imagemap) so angezeigt, wie Sie es erwarten würden, dann wird dem aber der Pfad zur Plandatei am Ende hinzugefügt. Der Pfad zur Plandatei sollte aus einem vollständigen Pfad-Namen vom Wurzelverzeichnis Ihres Webverzeichnisses bestehen (also alles nach dem Host-Namen in Ihrem URL), in diesem Fall /maps/myimage.map. (Diese seltsam aussehende Form eines URLs wird später näher beschrieben, wenn Sie mehr über CGI-Skripting in Kapitel 19 lernen.)


Der zweite Teil des HTML-Codes, der einen Server-seitigen Abbildungsplan erstellt, ist das ISMAP-Attribut des <IMG>-Tags. Dies ist ein einfaches Attribut ohne Wert, das den Browser anweist, individuelle Mausklick-Koordinaten zum Abbildungsplan-Programm auf der Server-Seite zur Verarbeitung zu schicken.


Und jetzt, nachdem sich alle drei Teile des Server-seitigen Abbildungsplan-Programms an Ort und Stelle befinden (die Plandatei, das Abbildungsplan-Programm und der spezielle HTML-Code), sollte der Abbildungsplan funktionieren. Sie sollten jetzt dazu in der Lage sein, Ihre HTML-Datei in den Browser zu laden und den Abbildungsplan dazu zu verwenden, verschiedene Seiten auf Ihrem Server zu erreichen, indem Sie verschiedene Teile des Plans anklicken.


Wenn Sie den NCSA-HTTPD-Server benutzen und nicht die neueste Version von imagemap besitzen, werden Sie die Fehlermeldung "Cannot Open Configuration file" (Konfigurationsdatei kann nicht geöffnet werden) bekommen, wenn Sie versuchen, Teile Ihres Bildes auszuwählen. Wenn Sie diese Fehlermeldungen erhalten, setzen Sie sich mit Ihrem Web-Administrator in Verbindung.


Übung 17.1: Ein anklickbarer Bücherschrank

Abbildungspläne können eine ziemlich haarige Angelegenheit sein, besonders da Plandateien recht fehleranfällig sind, wenn Sie die einzelnen Regionen nicht deutlich skizziert und nicht alles am richtigen Ort installiert haben. In dieser Übung nehmen wir eine einfache Abbildung und erstellen eine Plandatei dafür, wobei wir das NCSA-Server-Plandatei-Format benutzen. Auf diese Weise werden Sie ein Gefühl dafür bekommen, wie Plandateien aussehen und wie sie erstellt werden.


Die Abbildung, die wir hier benutzen (die Sie auf der Buch-CD finden können), ist ein einfaches Farbbild von einigen Büchern (Abbildung 17.6). Sie können die Farben hier nicht sehen, aber von links nach rechts sind es Rot, Blau, Gelb und Grün.

siehe Abbildung

Abbildung 17.6:
Das Bücherrücken-Bild

Als erstes lassen Sie uns die Regionen definieren, die in diesem Bild anklickbar sein sollen. Aufgrund der eckigen Natur der Bücher ist es am passendsten, Regionen aus Vielecken (Polygone) zu erzeugen. Abbildung 17.7 zeigt ein Beispiel dieser Art von Regionen, die bei diesem Bild sinnvollerweise verwendet werden können, in diesem Fall für das linke (rote) Buch. Sie können vergleichbare Regionen für jedes der Bücher in der Reihe definieren. (Zeichnen Sie, wenn Sie wollen, auf der Abbildung selbst. Ich hab' nichts dagegen.)


siehe Abbildung

Abbildung 17.7:
Der Buchrücken mit definierter Region

Jetzt haben Sie eine Vorstellung von den Bereichen jeder Region. Lassen Sie uns nun die exakten Koordinaten der Ecken herausfinden. Um dies zu tun, können Sie entweder ein Planprogramm wie Mapedit oder WebMap verwenden (was ich sehr empfehle) oder es von Hand tun. Wenn Sie es tatsächlich von Hand versuchen, geben Ihnen die meisten Bildverarbeitungsprogramme eine Möglichkeit, die x- und y-Koordinaten des Bildes anzugeben, wenn Sie die Maus darüberziehen. Ich habe das Info-Fenster von Adobe Photoshop verwendet, um die in Abbildung 17.8 gezeigten Koordinaten zu erhalten.


Sie besitzen kein Bildverarbeitungsprogramm? Dann kann ich Ihnen einen Trick verraten, den Sie mit dem Netscape-Browser anwenden können: Erzeugen Sie eine HTML-Datei mit einem Bild innerhalb eines Links, das auf eine nichtexistierende Datei verweist, und fügen Sie das ISMAP-Attribut innerhalb der <IMG>-Kennung ein. Sie brauchen kein echtes Link; nehmen Sie einfach irgendwas. Der HTML-Code könnte ungefähr so aussehen:

<A HREF="nothing"><IMG SRC="myimage.gif" ISMAP></A>


Wenn Sie jetzt diese HTML-Datei in Ihren Browser laden, wird das Bild dargestellt, als sei es ein Abbildungsplan, und wenn Sie Ihre Maus darüberziehen, werden die x- und y-Koordinaten in der Statuszeile des Browsers dargestellt. Mit diesem Trick können Sie die Koordinaten für jeden Punkt auf dem Bild für die Plandatei herausfinden.

siehe Abbildung

Abbildung 17.8:
Das Bücherregal mit den Koordinaten

Neben den Regionen und der Liste mit Koordinaten brauchen Sie nun noch Dokumente, zu denen verzweigt werden kann, wenn das passende Buch angewählt wird. Das kann jedes Dokument sein, es können jedoch auch Skripts sein: Alles, was Sie von einem Browser aus aufrufen können, können Sie nehmen. Für dieses Beispiel habe ich ein Dokument namens redbook.html in meinem www-Verzeichnis auf meinem Web-Server erstellt. (Sie können diese Datei auch auf der Buch-CD finden.)

Dies ist die Seite, die wir als Sprungziel benutzen, wenn das rote Buch ausgewählt wird.


Was nun noch übrigbleibt, ist der Eintrag in der Plandatei für diesen Bereich, mit den Koordinaten und der Zieldatei, die aufgerufen wird, wenn der Bereich ausgewählt wird. Für eine NCSA-Plandatei sähe der Eintrag so aus:


poly /www/redbook.html 70,0 0,37 0,183 27,192 27,48 103,9


Beachten Sie, daß die URLs in der Plandatei absolute Pfad-Namen von der Spitze des Web-Stammverzeichnisses aus sein müssen (nicht von der Spitze des Dateisystems). Es können in der Plandatei keine relativen URLs verwendet werden; Abbildungspläne funktionieren damit nicht. In diesem Fall hier ist mein www-Verzeichnis im Web-Wurzelverzeichnis, und die Datei redbook.html liegt in diesem Verzeichnis, so daß der URL für die Plandatei /www/redbook.html ist.


Jetzt können Sie auch für die anderen Bücher in der Abbildung (blau, gelb, grün) vergleichbare Einträge erstellen. Und vergessen Sie nicht, eine default-Zeile in die Plandatei zu schreiben für jene Maus-Klicks, die keines der Bücher treffen (in diesem Beispiel eine Datei namens notabook.html):


default /www/notabook.html


Speichern Sie Ihre Plandatei im Plan-Verzeichnis Ihres Servers (oder wo immer Sie Ihre Plandateien aufbewahren). Schließlich erzeugen Sie noch eine Webseite, die die Abbildung der Bücher, das ISMAP-Attribut im <IMG>-Tag und das Link zum Abbildungsplan-Programm enthält. Hier ist ein Beispiel, das das Imagemap-Programm auf meinem Server verwendet:


<A HREF="http://www.lne.com/cgi-bin/imagemap/maps/books.map">
<IMG SRC="image.gif" ISMAP></A>


Jetzt haben Sie's geschafft. Wenn alles richtig verbunden ist, sollten Sie, wenn Sie einen Bücherrücken auf dem Bild anklicken, zu der entsprechenden Seite hinspringen.



Client-seitige Abbildungspläne erzeugen

Wenn Sie einen Client-seitigen Abbildungsplan erstellen, sind viele der Schritte zum Herausfinden der Koordinaten auf jedem Gebiet der Karte genau die gleichen wie die für die Erzeugung von Server-seitigen Abbildungsplänen. Im Unterschied zu den Server-seitigen Abbildungsplänen, die eine separate Datei benutzen, um die Koordinaten und Verweise für jedes Link zu speichern, beinhalten Client-seitige Abbildungspläne alle Zuordnungsinformationen im HTML-Dokument selbst.



Die<MAP>- und <AREA>-Kennungen

Um einen Client-seitigen Abbildungsplan in ein HTML-Dokument aufzunehmen, verwenden Sie die <MAP>-Kennung, die so aussieht:


<MAP NAME="mapname"> coordinates and links </MAP>


Der Wert, der dem NAME-Attribut zugewiesen wird, ist der Name der Plan-Definition. Dies ist der Name, der später dazu benutzt werden wird, das anklickbare Bild mit den korrespondierenden Koordinaten und Link-Referenzen zu verbinden. Wenn Sie dann mehrere Abbildungspläne auf derselben Seite haben, haben Sie auch mehrere <MAP>-Tags mit verschiedenen Namen.

Zwischen den <MAP>- und </MAP>-Tags geben Sie die Koordinaten für jeden Bereich auf dem Abbildungsplan und die Zielgebiete dieser Regionen ein. Dabei verwenden Sie dieselben Werte und Links, die Sie im Abschnitt über Server-seitige Abbildungspläne festgelegt haben. Diesmal werden die Koordinaten jedoch innerhalb eines anderen neuen Tags, nämlich des <AREA>-Tags, angegeben. Um beispielsweise den Polygon-Bereich aus der Übung 17.1 zu definieren, würden Sie folgendes schreiben:

 

<AREA SHAPE="POLY" COORDS="70,0, 0,37, 0,183, 27,192, 27,48, 103,9"
HREF="/www/redbook.html">


Was für eine Form die Region hat, wird durch das SHAPE-Attribut bestimmt, welches die Werte RECT, POLY und CIRCLE annehmen kann. Die Koordinaten für jede der Formen werden durch das COORDS-Attribut bestimmt. So sieht z.B. das COORDS-Attribut für die POLY-Form folgendermaßen aus, wobei jede x-, y-Kombination einen Punkt auf dem Polygon repräsentiert:


<AREA SHAPE="POLY" COORDS="x1,y1,x2,y2,x3,y3,[el],xN,yN" HREF="URL">
Bei RECT-Formen ist x1,y1 die obere linke Ecke des Rechtecks, und x2,y2 die untere rechte Ecke:
<AREA SHAPE="RECT" COORDS="x1,y1,x2,y2" HREF="URL">
Und bei Kreisen repräsentieren x,y den Mittelpunkt einer kreisförmigen Region, die durch die Größe von radius bestimmt wird:
<AREA SHAPE="CIRCLE" COORDS="x,y, radius" HREF="URL">

Das letzte Attribut, das Sie bei jedem <AREA>-Tag definieren müssen, ist das HREF-Attribut. Sie können HREF jede beliebige URL zuweisen, die Sie normalerweise mit einem <A>-Link verbinden würden, einschließlich relativer Pfad-Namen. Außerdem können Sie HREF mit dem Wert »NOHREF« versehen, um Bereiche der Abbildung zu definieren, die keine Links zu einer neuen Seite beinhalten.


Wenn Sie Client-seitige Abbildungspläne zusammen mit Frames verwenden, können Sie auch das TARGET-Attribut innerhalb eines <AREA>-Tags einsetzen, um eine neue Seite in einem bestimmten Fenster zu öffnen, wie im folgenden Beispiel:

<AREA SHAPE="RECT" COORDS="x1,y1,x2,y2" HREF="URL">
TARGET="window_name">



Das USEMAP-Attribut

Nachdem Ihr Client-seitiger Abbildungsplan durch die <MAP>-Kennung definiert wurde, bleibt nur noch übrig, die Abbildung auf Ihrer Webseite einzusetzen. Dazu benötigen Sie eine spezielle Version des <IMG>-Tags, die ein Attribut namens USEMAP enthält (dies unterscheidet sich von ISMAP bei Server-seitigen Abbildungsplänen). USEMAP sieht folgendermaßen aus, wobei planname der Name eines Abbildungsplans ist, der durch die Kennung <MAP NAME="planname"> definiert wird:


<IMG SRC="image.gif" USEMAP="#planname">


Im Unterschied zu Server-seitigen Abbildungsplänen brauchen Sie das <IMG>-Tag nicht in ein <A>-Tag zu stecken. Statt dessen gibt das USEMAP-Attribut dem Web-Browser an, daß die <IMG>-Kennung einen anklickbaren Abbildungsplan enthält.

Der Wert, den USEMAP annimmt, ist ein Standard-URL. Deswegen wird planname mit einem Nummernzeichen (#) davor geschrieben. So wie bei Ankern innerhalb von Webseiten gibt das Nummernzeichen dem Browser an, planname auf der aktuellen Webseite zu suchen. Wenn Sie jedoch einen sehr komplexen Abbildungsplan haben, kann er in einer separaten HTML-Datei gespeichert und durch ein normales URL angegeben werden.


Übung 17.2: Noch ein Besuch beim anklickbaren Bücherregal

Um die Besprechung von Abbildungsplänen abzuschließen, lassen Sie uns überlegen, wie das Abbildungsplan-Beispiel aus der Übung 17.1 geschrieben werden müßte, wenn es sich um einen Client-seitigen Abbildungsplan handelt. Da wir bereits im Besitz der Koordinaten und Zielorte sind, brauchen wir eigentlich nur noch die Server-seitige Plandatei in Client-seitiges HTML umzuwandeln.

Beim Bücherbild sehen die <MAP>-Kennung und die damit verbundene <AREA>-Kennung folgendermaßen aus:

<MAP NAME="books">
<AREA SHAPE="POLY" COORDS="70,0, 0,37, 0,183, 27,192, 27,48, 103,9"
HREF="/www/redbook.html">
</MAP>


Das <IMG>-Tag, das sich auf die Plan-Koordinaten bezieht, ist ebenfalls unterschiedlich. Es verwendet USEMAP anstelle von ISMAP und ist nicht von einem Link umgeben:

<IMG SRC="image.gif" USEMAP="#books">

Schließlich packen wir den ganzen Code zusammen und testen ihn. Hier ist die Beispiel-HTML-Datei, die sowohl die <MAP>-Kennung als auch das Bild selbst enthält. Das Ergebnis wird in Abbildung 17.9 gezeigt.

 

Icon

<HTML><HEAD>
<TITLE>The Virtual Bookshelf</TITLE>
</HEAD><BODY>
<H1>The Virtual Bookshelf</H1>
<P>Please select a book:</P>
<IMG SRC="books.gif" USEMAP="#books">
<MAP NAME="books">
<AREA SHAPE="POLY" COORDS="70,0, 0,37, 0,183, 27,192, 27,48, 103,9"
HREF="/www/redbook.html" >
</MAP>
</BODY>
</HTML>


Icon

siehe Abbildung

Abbildung 17.9:
Der fertige Abbildungsplan


Erzeugen von Webseiten, die beide Typen von Abbildungsplänen unterstützen

Das Hauptproblem bei der Verwendung von Client-seitigen Abbildungsplänen in Ihren Webseiten ist es, daß sie zwar schneller und leichter ausgeführt werden können als Server-seitige Abbildungspläne, jedoch nicht von allen Browsern unterstützt werden. Es wird nämlich noch eine ganze Menge alter Browser verwendet, die Client-seitige Imagemaps nicht verarbeiten können. Deswegen sollten Sie, wenn Sie Client-seitige Abbildungspläne benutzen, gleichzeitig auch ein Server-seitiges Äquivalent einsetzen und dann Ihre HTML-Dateien dahingehend modifizieren, daß sie beide Typen von Abbildungsplänen unterstützen. Auf diese Weise werden Ihre Seiten gleich gut mit beiden Versionen der Abbildungspläne funktionieren, aber gleichzeitig die Vorteile der Client-seitigen Methode bei den Browsern ausnützen, die sie unterstützen.

Um einen Abbildungsplan zu erzeugen, der die Client-seitige Unterstützung ausnutzt, sofern sie verfügbar ist, aber auf die Server-seitige Unterstützung zurückgreift, wenn nötig, verwenden Sie die folgende standardmäßige Server-seitige Definition:

<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" ISMAP>
</A>

Danach fügen Sie die Einzelheiten des Client-seitigen Abbildungsplans als Teil des <IMG SCR="image.gif" ISMAP>-Textes ein, wie folgt:

<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" USEMAP="#books" ISMAP>
</A>

Natürlich müssen Sie, damit dies funktioniert, auch die myimage.map-Datei auf dem Server installiert haben und die Definition des <MAP>-Tags mit dem Namen »books« irgendwo auf Ihrer HTML-Seite einbauen.

Zusammenfassung

In diesem Kapitel haben Sie gelernt, wie Sie in Ihre Seiten Abbildungspläne einbauen können. Sie sollten jetzt auch den Unterschied zwischen Server-seitigen und Client-seitigen Abbildungsplänen kennen und wissen, welche in welchen Browsern verfügbar sind. Sie haben auch gelernt, wie Sie die aktiven Regionen bestimmen und die Koordinaten dazu definieren, und wie Sie Plandateien für Client-seitige Abbildungspläne erzeugen. Sie sollten jetzt auch wissen, wie Sie anklickbare Bilder, Plandateien und Abbildungsplan-Programme auf dem jeweiligen Server miteinander verbinden.

Da dies ein sehr umfangreiches Kapitel war, zeigt Tabelle 17.2 nochmals eine Zusammenfassung der Kennungen und Attribute, die Sie in diesem Kapitel kennengelernt haben.

Tabelle 17.2: HTML-Kennungen aus diesem Kapitel

Kennung

Attribut

Anwendung

<MAP>

 

Definiert den Abbildungsplan, wenn es sich um einen Client-seitigen Abbildungsplan handelt.

 

NAME

Ein Attribut des <MAP>-Tags, das den Namen des Abbildungsplans bestimmt.

 

USEMAP

Ein Attribut des <IMG>-Tags, das benutzt wird, um eine Abbildung mit einem Client-seitigen Abbildungsplan zu assoziieren, der durch <MAP NAME="planname"> bestimmt wird.

<AREA>

 

Die individuellen Regionen innerhalb eines <MAP>-Elements.

 

TYPE

Ein Attribut des <AREA>-Tags, das den Typ der Region angibt. Mögliche Werte sind RECT, POLY und CIRCLE.

 

COORDS

Ein Attribut des <AREA>-Tags, das die Koordinaten der Eckpunkte der Region angibt.

 

HREF

Ein Attribut des <AREA>-Tags, das den URL der Region angibt.

Fragen und Antworten

Frage:

Brauche ich einen Server, um einen Abbildungsplan zu erzeugen? Ich möchte dies alles offline erzeugen und testen, genau so, wie ich das bei meinen regulären HTML-Dateien gemacht habe.

Antwort:

Wenn Sie Client-seitige Abbildungspläne anwenden, können Sie sie auf Ihrem lokalen System erzeugen und testen (vorausgesetzt natürlich, daß die Zielorte Ihres Abbildungsplans ebenfalls Teil Ihrer lokalen Präsentation sind). Wenn Sie jedoch Server-seitige Abbildungspläne verwenden, müssen Sie mit dem Server verbunden sein, wenn es funktionieren soll, da Sie das Abbildungsplan-Programm auf dem Server benötigen.

Frage:

Meine Server-seitigen Abbildungspläne funktionieren nicht? Wo liegt das Problem?

Antwort:

Es gibt da mehrere Ursachen und Lösungsmöglichkeiten:

Frage:

Meine Client-seitigen Abbildungspläne funktionieren nicht. Wo liegt das Problem?

Antwort:

Hier sind ein paar Vorschläge:


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel