Was ich 1998 über Bilder im Web wusste

Mehr als zehn Jahre ist der folgende Artikel alt. Er dokumentiert, wie man anno 1998 mit Bildern im Web umgegangen ist. Damals war Bandbreite auch bei Bildern noch ein Thema und Imagemaps regierten die Multimedialen Websites. Viel Spaß beim Lesen.

Bilder verzieren jede Homepage. Doch wenn sie zu groß werden, stören sie den Seitenaufbau. Gerade bei Client Side Image Maps ist das unangenehm. Internet Professionell zeigt, welche Wege zu schnelleren interaktiven Grafiken führen.

Viele Web-Designer stellen hübsche Bilder auf die Hauptseite ihrer Homepage und packen Hyperlinks hinein. Das Resultat nennt sich Client Side Image Map und hat einen Nachteil: Viele Bilder sind zu groß. Die Folge: Lange Wartezeiten bis zum nächsten Klick. Das bekommen Sie in den Griff, indem Sie die Datenklumpen in handliche Stücke aufteilen und in eine Tabelle packen. Die Bildteile kommen dann parallel über das Netz und die schon vorher erscheinenden Bildumrisse mit dem Alt-Parameter zeigen, welcher Link sich hinter einem Bild verbirgt. Zweiter Vorteil der portionierten Bilder: Einzelne Bestandteile lassen sich mit Animated GIFs aufpolieren oder per Javascript animieren.

Bilder aufteilen

Bevor Sie sich ans grafische Werk machen, sollten Sie Tuchfühlung mit einem Grafikprogramm aufnehmen. Paintshop Pro reicht für die meisten Zwecke aus. Für einen ersten Versuch zeichnen Sie einen Balken mit 600 Bildpunkten Breite und einer Höhe von 50 Pixel. Ein hübscher Farbverlauf als Hintergrund und ein paar Wörter, die später als Links dienen werden -- fertig. Speichern Sie die Grafik im TIF-Format. Nun geht es an die Schneidearbeit. Die erfordert das Selection-Tool und etwas Fingerspitzengefühl. Wichtig ist, daß Sie beim Ausschneiden genau die Bildränder erwischen. Ist ein Bildteil markiert, landet er am schnellsten mit den Tastenkombinationen [Strg X] und [Strg V] in einem neuen Bild, das Sie dann unter einem neuen Namen als Jpeg speichern. [Strg X] schneidet den Bildteil aus -- das ist besser, da Sie so leichter die verbleibenden Teile erkennen. Achten Sie darauf, das am Schluß leere Original nicht wieder speichern. Denn das Ausgangsbild brauchen Sie vielleicht später noch einmal.

Bilder nebeneinander

Der schnellste Weg zum guten Gesamtbild ist, einfach ein paar Grafiken nebeneinanderzustellen. Zeichnen Sie zuerst ein komplettes Bild und teilen Sie es dann wie beschrieben in Einzelgrafiken auf. Diese Einzelteile setzt der Browser dann wieder zusammen, wenn Sie die Bilder nacheinander einbinden. Ideal ist dieses Verfahren beispielsweise für grafische Menüleisten. Hier zeigen kleine beschriftete Bildchen den weiteren Weg durch die Homepage.

<body>

<nobr>

</nobr>

</body>

Dieser Code muß leider so unübersichtlich bleiben. Denn sobald Sie nach einem </a> einen Zeilenumbruch einfügen, interpretiert der Browser dies als Leerzeichen -- und schon wird die Grafik auseinandergerissen. Wichtig für die Leiste ist außerdem das <nobr>-Tag. Dieses vermeidet einen Zeilenumbruch wenn das Browserfenster zu klein wird. Die Bildchen bleiben brav nebeneinander.

Um Bilder als Hyperlinks zu definieren, schließen Sie diese einfach in das Anchor-Tag ein. Von Haus aus umrahmt ein Browser gelinkte Bilder in blau. Das ist häßlich. Abhilfe schafft der Parameter border=0 im Image-Tag. Unbedingt verwenden sollten Sie den Parameter alt. Er erfüllt gleich zwei Zwecke: Befindet sich der Mauszeiger über dem Bild, erscheint der alt-Text als Infobox neben dem Zeiger. Und wenn der Browser aus irgendeinem Grund die Bilder nicht lädt, erscheinen zumindest die Alt-Textchen anstelle der Grafiken.

Bilder in Tabellen

Die zweite Methode, Bilder zusammenzusetzen bieten Tabellen. Ihre Vorteile: Sie sind übersichtlicher in der Programmierung und Bilder können sich auch über mehrere Zeilen erstrecken. Das folgende Beispiel zeigt dasselbe Resultat wie das erste Listing, nur in einer Tabelle.

</table>

Wichtig ist, daß die Tabelle bei ihrer Definition die Parameter cellpadding und cellspacing mit auf den Weg bekommt. Beide Werte müssen auf 0 gesetzt sein. Sicherheitshalber sollte auch noch border=0 mit in die Definition. Das vermeidet in älteren Browser-Versionen, daß Tabellenlinien auftauchen.

Das Listing zeigt zusätzlich einen einfach zu programmierenden Animationseffekt. Sobald sich die Maus über einem Bild befindet, ändert es sich. Dazu wird eine zweite Variante des Bildes geladen. Zuständig hierfür ist das Event OnMouseOver. Damit Javascript weiß, wohin mit dem neuen Bild, muß das Original einen Namen tragen. Vergessen Sie also nicht, in jedem Bild den Parameter name zu setzen. Die Javascript-Zeile document.Home.src='leiste4ov.jpg' weist dann dem Image-Tag mit dem Namen Home das Bild leiste4ov.jpg zu. Verläßt die Maus das Bild wieder, tritt OnMouseOut in Kraft und bringt wieder das Originalbild auf den Schirm. Wichtig bei diesen Javascript-Events ist, auf korrekt gesetzte Anführungszeichen zu achten. Die gesamte Aktion muß in Quotes stehen, entsprechend findet sich der Bildname in einfachen Anführungszeichen wieder -- das vermeidet Verwechslungen. Angenehm: Die Javascript-Anweisungen funktionieren mit beiden Vierer-Versionen der Browser.

Mehrzeilige Tabellen

Geht es an die Arbeit mit mehrzeiligen Tabellen, müssen Sie vor allem auf den richtigen Schnitt der Bilder achten. Der einfachste Fall: Sind alle Ausschnitte gleich breit, setzen Sie diese einfach in Tabellenzeilen untereinander.

Kniffliger wird es, wenn die erste Zeile einen Ausschnitt enthält, die zweite und dritte Zeile dagegen mit je zwei Bildteilen kommen. Dann beginnt die Arbeit schon beim Zurechtschneiden der Bilder. Stehen zwei Teile untereinander, müssen sie in exakt derselben Breite ausgeschnitten sein. Denn der Browser formatiert anhand des oberen Bildes die Spaltenbreite, die auch für die zweite Grafik gilt. Stimmen die Breiten nicht überein, zeigen sich Lücken.

<BODY>

</TABLE>

<br>

</BODY>

Die erste Zeile der Tabelle enthält nur ein Teilbild. Deshalb muß diese Zelle sich über die gesamte Tabellenbreite erstrecken. Der Parameter colspan=2 erledigt dies.

Client Side Image Maps

Der dritte Weg zu klickbaren Bildern führt über die Client Side Image Maps. Diese definieren anhand von Koordinaten anklickbare Flächen in einer Grafik und weisen ihnen Hyperlinks zu. Je komplexer eine Grafik ist, desto eher kommen dafür Image Maps in Betracht -- denn bei einer Landkarte oder einem detaillierten Bild sind die Fähigkeiten des Tabellendesigns schnell erschöpft.

Einfache Image-Maps programmieren Sie schnell von Hand. Grundformen wie Rechtecke oder Kreise liefert die Map-Definition mit. Die notwendigen Koordinaten machen Sie anhand eines Grafikprogramms wie Paintshop Pro aus.

Als Grundlage benötigen Sie ein Bild -- egal ob Jpeg oder GIF. Wichtig ist, im Image-Tag den Parameter usemap einzutragen und ihm den Namen der Kartendefinition zuzuweisen.

</map>

<area> definiert den Bildbereich. Dabei kann der Parameter shape Werte wie circle für einen Kreis oder rect für ein Rechteck einnehmen. Coords legt die Koordinaten innerhalb des Bildes fest und href enthält den entsprechenden Querverweis.

Ein Rechteck geben Sie mit shape=rect und zwei Wertpaaren hinter coords ein. Das erste Paar beschreibt die linke obere Ecke, das zweite Paar die rechte untere. Kreise definieren Sie mit shape=circle, dem Koordinatenpaar für den Mittelpunkt und den Radius.

Ein dritter shape-Wert ist poly. Hier dürfen Sie beliebig viele Koordinaten-Paare angeben und so einen exakten Umriß formen. Doch das ist eine Arbeit für einen Editor.

Raffinierte Image-Maps mit Live Image

Live Image ist ein leistungsstarker Image-Map-Editor, den Sie unter www.liveimage.com downloaden. Nach dem Start meldet sich ein Wizard, der Ihnen bei der Auswahl von HTML-Seite und Grafik hilft. Wahlweise erzeugt Live Image ein neues Web-Dokument oder bindet die Image Map in eine bereits bestehende Datei ein. Für einen ersten Test wählen Sie den New Image Map Wizard und erzeugen die Image Map in einer neuen HTML-Datei -- brand new HTML file. Danach suchen Sie ein Verzeichnis aus, in dem das neue Dokument landen soll und vepassen der Datei einen Namen. Jetzt laden Sie noch ein Bild von Ihrer Festplatte ein Bild und können loslegen.

Sind die Vorbereitungen abgeschlossen, zeigt Live Image ein zweigeteiltes Fenster: Links die Querverweise, rechts das Bild. Vier blaue Icons stehen für die Umrißformen. Probieren Sie zunächst ein wenig mit den Kreisen oder Rechtecken herum. Sobald Sie einen Umriß fertig haben, erscheint ein Dialog, in dem Sie die URL eingeben. Der Eintrag unter Comment landet im alt-Parameter des Image-Map-Bereichs.

Neben Rechteck, Kreis und Polygon zeigt Live Image mit Smooth Poly ein besonderes Werkzeug. Dieses Werkzeug, freihändig Umrisse exakt nachzuzeichnen -- im Gegensatz zum Polygon-Tool, das einzeln gesetzte Bildpunkte miteinander zu einem Umriß verbindet. Tip: Polygon-Umrisse komplettieren Sie mit einem Doppelklick, Sie müssen nicht mühsam die letzte Linie auf den Anfangspunkt legen. Das freihändige Smooth Poly hat allerdings einen Nachteil: Live Image rechnet den Umriß in Einzelkoordinaten um – je komplexer der Umriß, desto mehr Koordinatendaten müssen sich durch das Netz quälen..

Nach dem Editieren speichern Sie Ihr neues Image Map und können es dann als HTML-Datei editieren und erweitern

Image Maps aktiv

Image Maps vertragen ausgezeichnet Javascript. Wie in der Tabellenversion dürfen Sie mit OnMouseOver und OnMouseOut nachsehen, ob sich der Mauszeiger über einem Bildteil befindet. Dann allerdings das Bild zu verändern gestaltet sich knifflig – für einen Highlight-Effekt etwa müßte die komplette Image Map nochmals geladen werden. Interessanter ist in diesem Fall eine Erläuterung, die ihrerseits als Grafik oder als Text in einem Formularfeld erscheint. Das ist vor allem deshalb sinnvoll, da das <area>-Tag zwar einen Alt-Parameter mitbringt, dessen Inhalt aber nicht anzeigt, wenn sich der Mauszeiger über dem Ausschnitt befindet:

</MAP>

</form>

Dieses Listing verwendet ein Input-Feld aus einem Formular, um die Informationen anzuzeigen. Je nachdem, über welchem Area sich der Cursor befindet, weist Javascript dem Formularfeld einen anderen Text zu. Besonders hübsch sieht das zwar nicht aus -- aber es spart Bandbreite. Alternativ können Sie Infografiken verwenden:

</MAP>

</BODY>

</HTML>

Hier zeigt das Image-Tag info zunächst ein leeres Bild. Je nach Plazierung des Mauszeigers wird dann an dieser Stelle eine andere Grafik geladen.

Niemals ohne Text

Selbst wenn Sie noch so schöne Bilder zeichnen und noch so raffinierte Scripts programmieren. Sie alle bringen nichts, wenn ein Leser mit einem alten Browser auf Ihrer Homepage landet. Deshalb gilt: Alle Links auch per Klartext. Plazieren Sie unterhalb einer Image Map nochmals alle Verknüpfungen. Auf vielen Homepages finden Sie diese Links in eckigen Klammern geschrieben, zum Beispiel:

<a href="mtb1.html">[Das Wetter in Utah]</a>

<a href="mtb2.html">[Der Slick Rock Trail]</a><br>

[..]

</center>

Die Links haben einen zweiten Vorteil: Manche Surfer sind aus Tempogründen mit abgeschalteten Bildern unterwegs und auf die Textlinks angewiesen. Außerdem erscheinen die Texte vor den Bildern auf der Seite -- eilige Netzbenutzer klicken gleich weiter.

Verwenden Sie als Texte für die Links einfach die alt-Bezeichnungen der jeweiligen Grafiken. So findet sich der Leser schnell zurecht. Verschonen Sie diese Hyperlinks mit Formatspielereien und lassen Sie ihnen auch den typischen Unterstrich -- denn austoben können Sie sich in der Grafik.

Einen zusätzlichen Dienst erweisen Sie Surfen mit alten Browsern, wenn Sie Ihrer Client Side Image Map einen Default-Link zuweisen:

Browser, die mit Client Side Image Maps nicht zurechtkommen, verzweigen bei einem Klick auf das Bild zu default.html. Alle anderen WWW-Clients nutzen die Map.

Mehr dazu:

RSS Abonnieren

Facebook

Del.icio.us

Twitter

Aktualisiert am: 23.09.2009

Zurück Startseite