Modul 8.1 Multimediakurs: Animationen und Co./ Imagemaps und Slices

Modul 8.1: Arbeiten mit Imagemaps und Sliced Images:

Am besten erklären wir mit einem Beispiel, was eine Imagemap ist. Wenn Sie mit der Maus über untenstehendes Bild fahren, ändert sich der Mauszeiger an bestimmten Stellen und Sie können klicken und einen URL aufrufen. Je nachdem, wo Sie klicken, werden unterschiedliche Seiten aufgerufen, z.B. auf den Schriften, für die Schildkröte rechts oben und die Fische links unten. Probieren Sie es aus und schließen danach wieder das Fenster (das untere Bild wird übrigens im Riffressourcen-Server unseres Hauser verwendet: www.riffe.de)

Im Quellcode haben wir eine sogenannte Image-Map erstellt, die definiert, welche Bereiche anklickbar sind und welcher URL dann geladen wird. Der html-Code sieht folgendermaßen aus. Zur Erläuterung habe ich einige wesentliche Elemente blau markiert.

<img src="beispiele/rifflogo.jpg" width=454 height=300 border=0 usemap="#rifflogo_Map"> <map name="rifflogo_Map"><area shape="polygon" alt="mehr Infos zu Fischen" coords="33,182,146,184,143,215,198,248,173,266,131,267,103,241,110,221,45,215" href="beispiele/fish.html" target="extra"> <area shape="circle" alt="mehr infos zu Schildkröten" coords="378,55,30" href="beispiele/turtle.html" target="extra"> <area shape="rect" alt="kuenstler" coords="152,275,295,293" href="beispiele/kuenstler.html" target="extra"> <area shape="rect" alt="zu den Seiten der Riffgruppe" coords="165,177,441,201" href="beispiele/reefgroup.html" target="extra"> <area shape="rect" alt="impressum von IYOR" coords="41,151,224,174" href="beispiele/impressum.html" target="extra"><area shape="rect" alt="zum IYOR-Server" coords="7,110,454,148" href="beispiele/server.html" target="extra"> </map>

Der Image-Tag bekommt den Attribut-Zusatz usemap mit dem Namen der Map, mit vorangestelltem Zeichen # (ist eine sog. eingebettete Map; Attribut ismap würde eine sog. serverseitige Map bezeichnen).

Die Map beginnt dann mit dem Tag <map> und endet mit </map>. Sie muss als Attribut den Namen des entsprechenden img-Attributs tragen (ohne #).

Die anklickbaren Bereiche werden innerhalb der Map durch den Tag <area> definiert. Alle weiteren Angaben sind Attribute zu diesem Tag:

das shape-Attribut gibt an, welche Form der anklickbare Bereich hat:

rect definiert einen rechteckigen Bereich. coords gibt x,y-Wert in Pixeln (von der linken oberen Bildecke gerechnet) des linken oberen sowie des rechten unteren Eckpunkts an. Insgesamt sind damit 4 Werte notwendig.

circle definiert einen kreisbereich. Angegeben in coords wird der Mittelpunkt (x,y) sowie der Radius, d.h. insg. 3 Werte.

polygon definiert beliebige polygonale Bereiche, wobei aber jeder Polygon-Eckpunkt mit zwei Werten (x,y) als coords anzugeben ist. Dies bedeutet eine relativ hohe Rechenleistung des Browsers.

alt ist fakultativ und kann einen Ersatztext angeben.

href gibt an, welcher URL beim Anklicken aufgerufen wird. Kann ein html-Dokument, aber ggf. auch eine andere Abbildung, ein Film usw. sein.

target müssen Sie angeben, falls der Link in einem anderen Fenster oder in einem anderen Frame geöffnet werden soll.

Wie aber erarbeiten Sie die Koordinaten für die shape-Bereiche?

Sie können dies von Hand mit einem Bildverarbeitungsprogramm machen, indem Sie die Lage der Eckpunkte in Pixeln ausmessen. Viel einfacher geht es aber mit entsprechenden Programmen. Dazu gibt es eine Fülle von Freeware- oder Shareware-Lösungen (z.B. MapEdit 2.61, Realkursteilnehmer siehe hier).

Besonders gut geht es auch mit ImageReady, dem Beiprogramm von Adobe Photoshop 6.0. Nachfolgend eine Screenshot-Abbildung zur Erläuterung des Vorgehens mit ImageReady

Erläuterung zu obiger Abbildung: mit einem dem Imagewerkzeuge (rot eingekreist in Werkzeugleiste) markieren Sie die anzuklickenden Bereiche. Für jeden ausgewählten Bereich tragen Sie in der Imagemap-Palette die notwendigen Angaben ein (neben dem roten Balken). Der Name für den Bereich ist nur für den internen Gebrauch, sie können den von ImageReady vorgeschlagenen Namen nehmen. Wichtig ist noch der URL sowie ggf. das Ziel (target). Definieren Sie nacheinander die notwendigen Bereiche. Sie erscheinen dann in einer blauen Umrandung. Der jeweils ausgewählte Bereich erscheint rot (wie oben der Polygon-Bereich). Mit dem Imagemap-Anfasswerkzeug (ebenfalls bei den Imagemap-Werkzeugen) können Sie auch nachträglich die Bereiche verändern.

Danach speichern Sie in der Version Optimiert speichern und geben als Speicheroption Bilder und html oder auch nur html ein. Danach wird Ihnen ein html-Dokument mit dem obigen Imagemap-Code ausgegeben, den Sie nur noch in Ihr html-Dokument kopieren müssen.

Tipp: Auch mit GoLive, Dreamweaver oder anderen fortgeschrittenen Webeditoren können Sie direkt Imagemaps erstellen. In Golive aktivieren Sie im Layoutmodus ein eingebautes Bild, gehen im Inspektor auf den Reiter Weitere, klicken dort auf Imagemap, geben ggf. einen anderen Namen ein und mappen Ihr Bild mit den Werkzeugen der Werkzeugleiste, die sich kontextsensitiv nun umgestellt hat.

Natürlich können Sie für Ihre Imagemap auch mit JavaScript kleinere Fenster bei Anklick aufgehen lassen, andere JavaScript-Aktionen wie z.B. Hinweisboxen aufgehen lassen und vieles mehr.

Ein gewisser Nachteil von Imagemaps ist, dass große Imagemap-Bilder relativ lange zum Laden brauchen. Speichern Sie deshalb das gemappte Bild nach Möglichkeit immer im Interlace-Modus ab (rascher Bildaufbau, wobei sich das Bild zunehmend nachschärft), damit der Benutzer sieht, dass da noch etwas Interessantes kommt. Eine Alternative sind Sliced Images (siehe unten).

Mögliche Anwendungsbeispiele:

Stumme Karte: Gestalten Sie eine Landkarte, eine geologische Karte oder eine andere thematische Karte ohne Beschriftung als Imagemap:

Lassen Sie den Benutzer überlegen, worauf der Zeiger ruht (z.B. Stadt). Klickt er, wird ihm das Ergebnis in einem anderen Frame oder kleinen sich öffnenden Fenster angezeigt. Mit JavaScript können Sie auch Programmieren, dass beim Klicken auf eine Stadt, Fluss etc. auch eine Abfragebox aufgeht (z.B. welche Stadt ist dies?), der Benutzer muss dann seine Antwort eingeben. Bei richtiger Antwort kommt eine andere JavaScript-Bestätigung. (ein entsprechendes Beispiel reiche ich später nach).

Navigationsleiste als Imagemap gestalten. Vorteil: Sie brauchen immer nur dieses Bild mit der zugehörigen Imagemap einbauen und haben Ihre Navigation.

Zoom-In-Funktionen: Nehmen Sie ein Geländebild mit verschiedenen Strukturen. Markieren Sie via Imagemap verschiedene Bereiche als anklickbar (z.B. verschiedene Berge, verschiedene geologische Strukturen, wie z.B. einen Störungsbereich, einen Bergsturz, ein Riff). Klick auf den jeweiligen Bereich öffnet eine weitere Seite mit einer vergrößerten Darstellung des ausgewählten Bildbereichs (kann ggf. auch in einem anderen Frame geöffnet werden).

Steuern Sie Imagemaps via dhtml: Legen Sie Floating-Boxes neben oder über Ihre Imagemap, die beim Laden auf invisible gestellt sind. Lösen Sie eine visible-Aktion beim Klicken auf einen Bildbereich aus. Dann erscheint z.B. eine vergrößerte Darstellung über der Map (zoom-in) oder eine Erklärung am Rand des Bildes.

Tipp: Sie können natürlich für JavaScript-Aktionen incl. dhtml auch andere Eventhandler verwenden, also z.B. onMouseOver oder onMouseOut (vgl. Sie mit Modul 7: JavaScript)

Sliced Images:

Aus Layoutgründen werden manche Seiten mit einem großen Bild gestaltet. Klickt man auf die verschiedenen Bereiche, gehen die entsprechenden Links auf. Das klassische Vorgehen ist hierbei die Benutzung von Imagemaps (s.oben), was aber den Nachteil hat, dass es sehr lange dauert, bis die Seite geladen ist, da der Bildaufbau bei einem annähernd seitenfüllenden Foto sehr lange dauern kann.

Alternativ können Sie ein derart großes Bild in verschiedene rechteckige Einzelteile zerschneiden, diese in eine Tabelle ohne Rand und ohne Randabstand sowie Inhaltsabstand packen. Dies hat den Vorteil, dass viele kleine Bilder gleichzeitig geladen werden und so zumindest der Eindruck des schnelleren Ladens der Seite entsteht. Die einzelnen Bildelemente können wiederum als LInks gestaltet sein (dabei img border auf 0 stellen). Weiterer Vorteil: Die einzelnen Bildelemente können Sie sogar als Rollovers gestalten, oder sogar animierte Gifs (siehe nächstes Kapitel) einbauen. Sie können auch einzelne Tabellenelemente leer lassen bzw. mit Text und Hintergrundfarben versehen und so sehr ansprechende Layouts gestalten.

Nachteil: Sie können die Bilder nur rechteckig zerschneiden. Polygonale oder runde anklickbare Felder sind damit nicht machbar (es sei denn, Sie verschachteln Sliced Images und Image Maps).

Vorgehen: früher war es sehr mühsame Handarbeit, die Bilder entsprechend zu zerschneiden und wieder zusammenzufügen. Auch hier gibt es inzwischen sehr ansprechende Hilfemöglichkeiten. Besonders schön geht dies wiederum mit dem Programm ImageReady.

Hier ein kleines Beispiel (1), beachten Sie den Bildaufbau beim Aufruf dieses Beispiels und sehen Sie sich den Quellcode an. ImageReady hat eine komplexe Tabelle generiert und wo nötig auch transparente Platzhalter gifs mit 1 Pixel Höhe. Bewegen Sie die Maus, um zu sehen, welche Bildbereiche anklickbar sind. Anstelle eines Links habe ich nun JavaScript-Hinweisboxen eingebaut (vgl. Modul 7: JavaScript). Ein Bildbereich wurde leergelassen. Die entsprechende Tabellenzelle wurde mit Hintergrundfarbe belegt und Text eingegeben (geht alles innerhalb ImageReady).
Nun dasselbe Beispiel. Jetzt sind die anklickbaren Bereiche aber zusätzlich als Rollover gestaltet. Das ist deutlich aufwändiger, aber mit Hilfe von ImageReady und ggf. Golive dennoch ohne große Schwierigkeiten umsetzbar (vgl. Sie mit dem nachfolgenden Kapitel zur Erstellung von Rollovers): Beispiel (2) mit Slices und Rollovers.

Natürlich können Sie viel schönere und sinnvollere Beispiele produzieren, z.B. Beschriftung bei Rollover einblenden oder Vergrößerungen aufrufen lassen. Gerade Beispiel 2 soll Ihnen zeigen, dass Sie hiermit auch viele Animationsmöglichkeiten haben. Machen Sie selbsterläuternde Bilder mit einer Verbindung aus Sliced Images und Rollovers, erarbeiten Sie stumme Karten, Fragespiele und vieles mehr. Was Sie mit Rollovers sonst noch anstellen können, erfahren Sie im nächsten Teilmodul.

Schließen Sie nun das Zusatzfenster wieder.

Hier noch ein Screenshot von ImageReady zur Erläuterung der Slice-Erstellung (bezieht sich auf Beispiel 1).

Die Slice-Werkzeuge liegen bei dem rot eingekreisten Symbol in der Werkzeugpalette (links oben). Zusätzlich müssen Sie die Slice-Palette im Menu Fenster öffnen (unten). Mit dem Slicewerkzeug ziehen Sie einen Rahmen für das erste Teilbild. ImageReady schlägt Ihnen die weiteren Teilbilder automatisch vor. Mit dem Slice-Werkzeug können Sie dies noch beliebig zerteilen.

Wechseln Sie dann zum Auswahl-Slice-Werkzeut (eingekreist links oben). Wählen Sie bei Bedarf die einzelnen Slices aus und geben in der Slicepalette URL und ggf. Ziel ein. Statt Typ Bild können Sie auch Typ ohne Bild eingeben. Mit HG können Sie eine Hintergrundfarbe eingeben sowie (in der dann geänderten Slice-Palette) einen Text.

Es gibt vielfältige weitere Slice-Funktionen, die Sie aus dem Menu Slice sowie aus dem sich geänderten Werkzeugmenu auswählen (rotes X) auswählen können. Deren Beschreibung sprengt aber den Rahmen dieses Kurses.

Aktueller Hinweis (April 03): auch mit Sliced Images kann es leider je nach Browser z.T. Darstellungsprobleme geben. Die beiden obigen Beispiele hat der Kursleiter mit folgenden Browsern getestet: Netscape Communicator 4.5 für Mac, NN 7 für Mac, IE 5.5 für Mac, IE 5.5 unter Windows2000, IE 6.0 unter WindowsXP Home, Opera 5.0 für Mac. Bei keinem gab es Darstellungsfehler. Allerdings erreichte mich ein Nutzerhinweis, dass unter einer IE 5-Version für Win98 weiße Bereiche im Bild gäbe. Auch mit dem derzeit im Beta-Stadium befindlichen Safari-Browser für Mac gibt es Probleme. Sobald ich Zugang zu einem Win98-System habe, werde ich eine Lösungsmöglichkeit versuchen.

Mir scheinen diese Probleme insbesondere dann aufzutreten, wenn Teile des ge-sclice-ten Bildes für Links verwendet werden bzw. falls noch weitere interaktive Inhalte auf der Seite befindlich sind. Falls auch Ihr Browser fehlerhafte Anzeige vollführt, bitte ich unter Angabe von Browserversion und Betriebssystem um Hinweise. Sicherer ist auf alle Fälle die Verwendung von Imagemaps (jedoch sind damit keine direkten Rollovers möglich).