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 ein Abbildungsplan ist
• Wie Sie Server-seitige AbbildungsplΣne erzeugen
• Wie Sie Client-seitige AbbildungsplΣne erzeugen
• Wie Sie beide Typen von AbbildungsplΣnen unterstⁿzten k÷nnen

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.

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.

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:

• Normalerweise, wenn Sie Ihren Cursor ⁿber ein Link ziehen, wird der URL, auf den das Link verweist, in der Statusleiste des Web-Browsers angezeigt. Da der Web-Browser jedoch keine Ahnung davon hat, wohin die Teile eines Server-seitigen Abbildungsplans zeigen, ist alles, was Sie zu sehen bekommen, wenn Sie Ihren Cursor ⁿber einen Server-seitigen Abbildungsplan bewegen, entweder der URL des Abbildungsplan-Programms selbst (nicht sehr hilfreich) oder dieser URL zusammen mit einigen x, y-Koordinaten (auch nicht besonders hilfreich).
• Es gibt keine Methode, mit der Sie Server-seitige AbbildungsplΣne auf lokale Dateien anwenden oder diese testen k÷nnen. AbbildungsplΣne erfordern die Anwendung eines Web-Servers, der das Abbildungsplan-Programm ausfⁿhrt und die x- und y-Koordinaten verarbeitet.
• Da jedes Mal, wenn ein User auf eine Seite mit einem Abbildungsplan klickt, ein spezielles Programm vom Server ausgefⁿhrt werden mu▀, reagieren AbbildungsplΣne viel langsamer auf Mausklicks als normale Links oder verknⁿpfte Bilder. Dies resultiert oft darin, da▀ AbbildungsplΣne ewig lange zu brauchen scheinen, um auf die Anforderung einer neuen Seite zu reagieren.

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.

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:

• Speziellen HTML-Code, der anzeigt, da▀ ein Bild ein Plan ist
• Eine Plandatei auf dem Server, die die Regionen auf dem Bild mit den verknⁿpften Webseiten korreliert
• Ein CGI-Skript, das alle Komponenten des Abbildungsplans miteinander verbindet

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.

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.

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.

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.

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).

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.)

• Fⁿr Kreis-Regionen notieren Sie sich die Koordinaten des Mittelpunkts und den Radius in Pixeln.
• Fⁿr Rechteck-Regionen notieren Sie die Ecken links oben und rechts unten.
• Bei Vielecken notieren Sie die Koordinaten von jeder Ecke.
• Bei Punkten notieren Sie den Punkt.

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.

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.

▄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.

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.)

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.

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.

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">

▄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.

<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>

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

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:

Stellen Sie sicher, da▀ die URLs in Ihren Plandateien absolute Pfad-Namen sind, von der Spitze Ihres Web-Verzeichnisses bis zu der Datei, mit der Sie eine Verbindung herstellen wollen. Sie k÷nnen in Plandateien keine relativen Pfad-Namen benutzen. Wenn absolute Pfad-Namen nicht funktionieren, versuchen Sie es mit vollstΣndigen URLs (die mit http anfangen).

• 
  

  ▄berprⁿfen Sie, ob Sie auch da absolute Pfad-Namen (und zwar so, wie sie im URL erscheinen) benutzt haben, wo Sie den Pfad zu der Plandatei hinter das Abbildungsplan-Programm geschrieben haben.

  
  

  Wenn Sie den HTTPD von NCSA benutzen, ⁿberprⁿfen Sie, ob Sie die neueste Version von imagemap haben. Anforderungen beim neuen imagemap-Gateway-Programm sollten nicht nach Konfigurations-Dateien suchen.

  
  

Frage:

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

Antwort:

Hier sind ein paar VorschlΣge:

Vergewissern Sie sich, da▀ die Pfad-Namen oder URLs innerhalb der <AREA>-Kennungen auf tatsΣchlich vorhandene Dateien zeigen.

• 
  

  Vergewissern Sie sich, da▀ der Plan-Name in der <MAP>-Datei und der Name des Plans im USEMAP-Attribut, das sich im <IMG>-Tag befindet, ⁿbereinstimmen. Nur der letztere sollte durch ein Nummernzeichen eingeleitet werden.

  
  

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