Yale C/AIM Web Style Guide

Überblick

Web-Grafik

Einführung

Farbbildschirme

Dateiformate für Grafiken

Interlaced GIF

Transparentes GIF

JPEG Grafiken

Zusammenfassung Formate

Illustrationen

Optimierung von Grafiken I

Optimierung von Grafiken II

Height & width Tags

Farbige Hintergründe

Imagemaps

Imagemaps bieten eine Möglichkeit, mehrere bildhafte Link-Bereiche innerhalb einer einzelnen Grafik auf einer Web-Seite zu definieren. Das bedeutet, daß Sie eine Bannergrafik für den oberen Rand Ihrer Seite erstellen und in diese Grafik mehrere Button-Bereiche einbauen können. Die Kopf- und Fußzeilengrafiken, die wir in diesem Handbuch verwenden, sind einfache Imagemaps. Die folgende Illustration zeigt, wie eine Kopfzeilengrafik aussehen würde, wenn die bildhaften Bereiche, die im Imagemap definiert sind, sichtbar wären:
Diagram of page header imagemap and links.

Serverseitige vs clientseitige Imagemaps
Bis vor kurzem standen die Imagemaps des Webs im Ruf, kompliziert zu implementieren und langsam auszuführen zu sein. Der Grund lag darin, daß das Originalverfahren für die Erstellung von Imagemaps auf Web-Seiten jedes Mal, wenn ein Benutzer auf eine Imagemap klickte, einen Hinweis auf eine separate Datei auf dem Host-Webserver verlangte. Diese serverseitige Imagemap-Technologie war unnötig komplex und sehr ineffizient. Seit Anfang 1996 unterstützen die wichtigsten Webbrowser clientseitige Imagemaps. Auf diesen wird die Information, welche Bereiche der Grafik bildhafte Links sind, in den HTML-Code für die Web-Seite eingebaut. Dort gehört sie auch hin. Die meisten Layoutprogramme für Web-Seiten beinhalten heute einfache grafische Schnittstellen für die Erstellung von Imagemaps. Das bedeutet, daß wir an dieser Stelle nicht näher auf die technischen HTML-Details einzugehen brauchen. In den untenstehenden Referenz-Links finden Sie weitere Informationen über die technischen Details der Erstellung von Web-Imagemaps. Sie können sich aber auch die HTML-Quelldatei der Seiten dieses Handbuchs ansehen.

Raumsparende grafische Wirkung
Imagemaps sind zu einem Standardmerkmal der meisten professionell gestalteten Web-Sites geworden. Der Grund dafür ist, daß sie eine effektive Mischung aus optischer Attraktivität und - bei sachgemäßer Anwendung - raumsparender Funktionalität bieten. Imagemaps sind besonders wirkungsvoll, wenn sie in Splash-Grafiken von moderater Größe am oberen Rand von Homepages oder in die Signaturgrafiken oder Logos eingebaut werden, die Ihre Seiten definieren. So verwendet zum Beispiel die Firma Apple Computer am oberen Rand ihrer Education-Seite ein Imagemap, das innerhalb einer charakteristischen Grafik zwölf verschiedene Link-Wahlmöglichkeiten anbietet. Dadurch wird sofort klar, daß die Seite zur Web-Site von Apple gehört:

Apple Higher Education home page imagemap example.

Grafik wurde verkleinert   hed.info.apple.com/

Grafische Flexibilität
Imagemaps stellen die einzige Möglichkeit dar, um in eine grafische Illustration mehrere Links einzubauen, wie in diesem Beispiel aus der Anatomie gezeigt:

Diagram of anatomic artwork as an imagemap.


Imagemaps sind gleichzeitig das beste Mittel zur Überwindung der vertikalen, listenorientierten, grafisch unflexiblen Standards konventioneller Web-Seiten, die mit Standard-HTML-Tags aufgebaut sind. Mit Imagemaps können Sie das HTML-Seitenlayout einfach vergessen. Sie können Links zu großen Grafiken vorsehen, so wie Sie es auch in CD-ROM Authoring-Programmen können. Solche Designs eignen sich jedoch nur für ein Publikum, dem für den Zugriff auf das Web oder auf das lokale Intranet eine große Bandbreite zur Verfügung steht.

Referenzen

Apple Computer, Inc. - Higher Education site

Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.