Image-Maps

Image-Maps

 

Eine Image-Map ist eine Grafik, die mit mehreren Verweisen verknüpft werden kann. Dies wird durch die Definition verschiedener verweissensitiver Bereiche innerhalb des Bildes erreicht. Jeder Bereich kann mit einer Verweis-Adresse verbunden sein, die durch Anklicken aktiviert wird. Das könnte z.B. so aussehen:

Image Map

Wenn man den Mauszeiger langsam über die Grafik führt, kann man die einzelnen Bereiche sehr gut erkennen, da jeder neue Bereich durch die Hand und/oder einen Verknüpfungshinweis in der Infozeile des Browsers angezeigt wird.

Wie wird nun ein Bild in verschiedene Bereiche aufgeteilt ? Dafür ein Beispiel:

<MAP NAME="ein_name">

<AREA SHAPE="RECT" COORDS="0,0,40,30" HREF="ziel1">

<AREA SHAPE="RECT" COORDS="50,0,40,30"

HREF="ziel2">

</MAP>

Der NAME sollte möglichst nicht so lang sein und weder Leer- noch Sonderzeichen enthalten (außer Unterstrich_).

Mit der Angabe zu AREA SHAPE wird die Form der verweissensitiven Fläche festgelegt: CIRCLE (=Kreis), RECT (=Viereck) und POLYGON (=Vieleck). Durch COORDS werden die Koordinaten der Fläche bestimmt. Diese Koordinaten können innerhalb eines Grafikprogramms ausgelesen werden. Oder noch besser mit einem darauf spezialisierten Tool aus dem Freeware-Bereich. Es geht auch mit etwas mühseliger Rumprobiererei. Bei einer viereckigen Fläche müßten z.B. je 2 Werte für eine linke obere Ecke und eine rechte untere Ecke angegeben werden. Bei einem Kreis sind 2 Werte für die Bestimmung des Mittelpunkts, sowie einer für den Radius notwendig. Ein Polygon braucht mehrere Werte, wenn auch komplexe Gebilde verwirklicht werden sollen. So wären etwa für einen fünfzackigen Stern 9 mal 2 Werte notwendig. Für ein polygones Dreieck reichen dagegen 3 mal 2 Werte. Mit HREF wird das Verweisziel angegeben, also z.B: eine andere Datei.

Bisher ist die Grafik im Programmier-Code noch gar nicht in Erscheinung getreten. An der Stelle, wo die verweissensitive Grafik zu sehen sein soll, muß also eingegeben werden:

<IMG SRC="grafik.gif" ALT="grafiktext" USEMAP="#ein_name">

Wichtig ist, daß USEMAP und MAP NAME einen identischen Namen besitzen.

Auch bei Image-Maps kann mit dem Attribut BORDER=0 verhindert werden, daß der Grafikverweis einen Rahmen erhält.

Natürlich ist die Verwendung von Image-Maps nicht ganz unproblematisch. Es handelt sich ja um mehr oder weniger große Grafiken. Auch wenn der Trend im WWW in eine andere Richtung geht, vermeiden Sie solche Monstergebilde mit quälend langen Ladezeiten. Der User wird es Ihnen danken.

Auf jeden Fall muß von Programmiererseite sichergestellt sein, daß die zugehörige Grafik auch sichtbar ist. Allerdings bleibt jedem User unbenommen, die Darstellung von Grafiken in seinem Browser auszuschalten. In beiden Fällen hat der Nutzer ein Problem. Auf den ersten Blick ist nämlich überhaupt nicht zu erkennen, daß da irgendwelche Links verborgen sind. Und falls durch Probieren doch welche gefunden werden (der Mauszeiger verwandelt sich dann netterweise in ein Händchen), bleibt eine gewisse Ratlosigkeit, da ja der Kontext in Form eines Symbols oder einer Beschriftung fehlt.

Noch schlimmer wird es, wenn für die eingebundene Grafik keine Größenangaben notiert wurden. Dann sind natürlich auch keine oder kaum verweissensitive Flächen vorhanden. Das ist wiederum abhängig von der Länge des ALT-Textes. Dumm dran ist man u.U. mit Opera. Verwendet man dort nämlich ganz korrekt die Größenangaben, aber die entsprechende Grafik kann nicht angezeigt werden, wird man etwas ratlos eine mehr oder minder große Leerfläche anstarren. Kein Mensch käme auf die Idee, daß dort eigentlich eine Grafik ihren Platz finden sollte. Warum ist das so? Weiß der Geier.

Ein weiterer Nachteil betrifft das (vergebliche) Indexieren durch Suchroboter. Diese sind ja auf Text spezialisiert und diesen können sie nicht von der Grafikoberfläche lesen. Wenn das auch keine unmittelbaren Auswirkungen hat, so können Sie die Arbeit der Roboter durch einen sinnvollen ALT-Text unterstützen. Auf jeden Fall sollte aber die Navigation an entscheidenden Stellen eines HTML-Projekts gesichert werden.

 

E-Mail-Adressierung

 

Das Attribut MAILTO ermöglicht den automatischen Aufruf eines E-Mail-Programms beim Nutzer. Die Zieladresse (üblicherweise vom Inhaber der Homepage) dürfte schon eingefügt sein, so daß der Nutzer gleich mit den Lobpreisungen über die Programmierkünste des Webmasters loslegen kann ;-)

<A HREF="MAILTO:ihrname@xserver">Hinweistext</A>

Durch Hinzufügen von ?subject= und einem Text hinter dem Gleichheitszeichen kann die Betreffzeile der E-Mail schon mit einem aussagekräftigen Hinweistext belegt werden.

<A HREF="MAILTO:ihrname@xserver?subject=Betrefftext">Hinweis</A>

 

WWW-Adressierung

 

Soll ein Verweis auf fremde Seiten im Internet gesetzt werden, wird lediglich die Zieladresse durch die entsprechende URL ersetzt.

<A HREF="http://www.blabla.de">Hinweistext</A>

Hinweis

Seien Sie umsichtig bei Links auf fremde Seiten, auch wenn das massenhaft praktiziert wird. Juristisch können Sie u.U. zur Verantwortung gezogen werden, wenn auf gelinkten Seiten zu Straftaten aufgerufen wird.

Auch nicht sehr nett ist es, wenn Sie auf einzelne Seiten linken und so tun, als wenn diese ein Bestandteil Ihres Webauftritts wären. Besonders frech im Zusammenhang mit Frames, da fremde Seiten damit zu "Gefangenen" werden. Öffnen Sie fremde Seiten grundsätzlich in einem eigenen Browser-Fenster:

<A HREF="http://www.blabla.de" TARGET=_BLANK>Hinweistext</A>

Die entscheidende Ergänzung ist hier TARGET=_BLANK. Damit können Sie aber nicht nur fremde Seiten in einem Extra-Fenster anzeigen lassen, sondern auch Ihre eigenen Dateien. So kann es durchaus sinnvoll sein, Beispielseiten oder große Bilder in einem weiteren Fenster betrachten zu lassen:

<A HREF="beispiel.htm" TARGET=_BLANK>Hinweistext</A>

 

FTP-Adressierung

 

Das File Transfer Protocol dient dazu, sich auf einem Server-Rechner im Internet einzuwählen und von dort Dateien auf den eigenen Rechner als Download zu übertragen oder eigene Dateien auf den Server-Rechner hochzuladen (Upload). Ein Verweis funktioniert wie bei der Adressierung von Webdokumenten:

<A HREF="ftp://blabla.de">Hinweistext</A>

Alle modernen Browser unterstützen die FTP-Adressierung.

 

Andere Dateiformate

 

Es sind auch Links auf ganz andere Dateiformate möglich. Beim Anklicken öffnet sich dann beim Nutzer ein entsprechendes Programm, das mit dem Dateiformat auch was anfangen kann. Selbstredend muß ein solches Programm beim Nutzer auch installiert sein. Ein Verweis auf eine ZIP-Datei eröffnet z.B. die Möglichkeit des Downloads:

<A HREF="zieldatei.zip">Hinweistext</A>

Eine Textdatei wäre ähnlich zu öffnen:

<A HREF="zieldatei.txt">Hinweistext</A>

Themengebiete