Imagemaps – verweissensitive Grafiken

In der Praxis erlebe ich es des öfteren, dass Kunden auf andere Webseiten verweisen auf denen interaktive Darstellungen zum Einsatz kommen, natürlich mit dem Wunsch “so etwas” auch auf den eigenen Seiten haben zu wollen. Ohne ein entsprechendes Hintergrundwissen ist es jedoch eine Fehleinschätzung zu meinen, dass solche Dinge zum Alltag des Webdesigns gehören würden und mit ein bisschen Voodoo ganz leicht zu realisieren sind. Und noch viel falscher ist es zu glauben, dass solche Dinge in einem CMS drin sind und man eigentlich nur noch wissen muss, welche Knöpfe man drücken muss, damit Inhalte z.B. in einem popup angezeigt werden oder dass die actionreiche Powerpoint-Präsentation ebensogut im content-Bereich einer Webseite erscheint.

Das alles ist für eine erfolgreiche Webseite nicht unbedingt notwendig. Eine Webseite ist ein Medium mit eigenen Gesetzen. Eine Webseite ist keine Powerpoint-Präsentation und auch kein Actionspiel, ebenso wenig kann und sollte man meinen, dass man z.B. den aufwändig gestalteten Firmenflyer 1:1 ins web übertragen kann und sollte.

Dennoch sollte man als Webdesigner solche Wünsche verstehen lernen, denn Realität ist auch, dass nicht alle Produkte und Dienstleistungen einfach zu erklären sind. So manche Angebotspalette ist breit gefächert und zusätzlich in der Tiefe stark differenziert. Wird jedoch neben den allgemeinen Informationen auch die Darstellung von Details gewünscht, kommt zwangsläufig irgendwo der Punkt, an welchem man auch an Möglichkeiten denken muss, von denen seltener Gebrauch gemacht wird – sei es, weil deren Herstellung das Budget sprengt, sei es, weil diese Darstellungen vielfach nicht crossbrowsertauglich und/oder barrierefrei sind. Wenn sichergestellt ist, dass die Hauptinhalte webgerecht aufbereitet wurden, halte ich es für durchaus verträglich, alternativ (und redundant) auch Präsentationenarten anzubieten, die zwar in etwa den gleichen Inhalt haben, aber die der visuellen Erfassbarkeit z.B. durch Diagramme und Schaubilder mehr entgegenkommen als reine Textversionen.

Und abgesehen davon: vieles im Netz wird verteufelt – aber warum? Weil die Browserhersteller und Google die Gesetze machen? Etwas ist falsch, weil Browser das nicht einheitlich gleich gut rendern können oder weil die Suchmaschine nicht jedes Futter nimmt. Ich bin nicht in jedem Fall damit einverstanden, denn wer macht denn eigentlich das Internet? Wer macht die Nachfrage? Wer bestimmt hier eigentlich was gut und was böse ist? Aber jetzt schweife ich ab … zurück zum Thema.

Verweissensitive Grafiken bieten sich an um Inhalte einmal anders aufzubereiten, als in bloßen Beschreibungen. Und genau damit habe ich mich in letzter Zeit ein bisschen eingehender beschäftigt. Ausgangspunkt war die altbekannte imagemap und damit fange ich hier einmal an:

1.0. Klassische Imagemaps

Im einfachsten Fall ist eine imagemap nichts weiter als eine Grafik, auf der ein Link ausgeführt werden kann. Klickt der Benutzer mit der Maus auf bestimmte Bereiche, wird ein Verweis ausgeführt.

Die verweissensitiven Bereiche können eckig (shape=”rect”), rund (shape=”circle”) oder polygonal (shape=”poly”) sein. Der Klicksensitive Bereich wird dabei mit Koordinaten umschrieben.

Nun ist es noch relativ einfach diese Koordinaten z.B. für den rechteckigen Bereich zu finden und anzugeben, im Zweifelsfall schafft man das mit ein bisschen Überlegung selber. Richtig interessant sind die Einsatzgebiete von Rechtecken aber nicht, weshalb wohl schnell der Polygonzug in das Zentrum des Interesses rücken wird. Wer Bedarf an ein bisschen Sysiphusrabeit hat, kann auch die Koordinaten für den Ploygonzug zu Fuß eingeben

http://www.html-world.de/program/html_14.php

– leichter geht es jedoch mit Unterstützung durch diverse Tools.

Der Imagemap-Creator von kolchose.org kann sowohl online benutzt werden als auch offline. Das Tool ist opensource und kostenlos erhältlich.

Eine weitere Möglichkeit bietet aber z.B. auch Dreamweaver. Hier ist eine Funktion zur Erstellung von imagemaps integriert.

Kann man also mit Hilfe eines Tools unkompliziert die Koordinaten zusammenstellen, ist die imagemap schnell zusammengebaut:

Nachteile dieser Konstruktion sind :

[-] Nur-Text-Browser oder bei deaktivierten Bildern bieten keine Orientierung mehr. Die map ist dann praktisch nicht mehr nutzbar.
Kann man leicht überprüfen mit dem FFAddon Yellowpipe

User von Textbrowsern stehen demnach so ziemlich im Regen. Ein mögliche Abhilfe kann sein, Formulare in imagemaps zu verwenden.
Ein lesenswerter Artikel hierzu:

Allerdings ist das sicherlich keine korrekte Lösung im Sinne des semantischen Webs und „what you mean is what you get“.

[-] Suchmaschinen verfolgen die in einer Image Map enthaltenen Links nicht.
[-] Es gibt von Haus aus keine Hover-Effekte.

1.1. Erweiterte Imagemaps

Die Möglichkeiten der klassischen imagemap (Anwendungsbeispiel von self-html) werden jedoch in den meisten Fällen nicht das sein, was Webdesigner bzw. deren Kunden wünschen. Sollen Diagramme und Schaubilder dargstellt werden, reicht es nicht lediglich einen Tooltip einzubinden, der beim Drüberhovern eine Textinformation anzeigt.

Vielfach erforderlich ist, dass angesprochene Bereich ihre Farbe wechseln UND dass Zusatzinformationen in einem Textfeld eingeblendet werden. Den in imagemaps enthaltenen Links kann man aber via CSS kein :hover zuweisen. Dafür jedoch sind allerlei Kunststückchen via Javsascript möglich.

Es gibt im Netz einige Beispiele hierzu, die ich mal zusammengegoogelt habe:

Dieses Beispiel nutzt ein Formular um Beschreibungen zu den Bildern anzuzeigen. Es funktioniert jedoch nicht bei deaktiviertem Javascript.

Hier noch weitere Beispiele:

In die Kategorie der Imagemaps mit Javascript kann man auch noch eine weitere Möglichkeit einordnen: Sowohl Corel Photopaint als auch Photoshop bieten die Möglichkeit so genannte Rollover und auch imagemaps zu erstellen. Das Ergebnis wird immer mit einem Scriptcode ausgeliefert, der den Hover Effekt und die Verlinkung steuert. Ein bisschen habe ich das mit photopaint ausprobiert, aber der Wust an Scripting, der dabei erzeugt wird, sieht mal nicht so gut aus, weshalb ich (derzeit) meine, dass das keine wirklich gute Lösung ist.

Es macht an dieser Stelle keinen Sinn, imagemaps mit Javascript weiter zu vertiefen, denn es gibt dafür auf CSS basierende bessere Lösungen.

2.0.  CSS imagemaps

Eigentlich muss man sagen: Pseudo-imagemap, denn im Grunde handelt es sich um eine Liste oder Definitionsliste, in welcher die Links absolut positioniert werden.

Hierzu gibt es zahlreiche Beispiele im Netz:

[+] Diese Art von imagemaps erzeugt ein sauberes Markup und funktioniert weitestegehend in allen Browsern.
[+] Als weiterer Vorteil ist, dass die eingeblendeten Textbeschreibungen echte Linktexte sind, die sich auch im Quelltext wieder finden.

[-] Der große Nachteil ist jedoch, dass man keine unregelmäßigen Bereich definieren kann. Der Hover-Effekt wird durch das Auswechseln eines Hintergrundbildes des Linkelementes a realisiert. Der klicksensitive Bereich ist deswegen u.Umständen größer als erforderlich und immer rechteckig.
[-] Eine css-imagemap ist aufwändig in der Herstellung. Je nachdem wie komplex das ganze Schaubild ist, müssen zahlreiche Einzelgrafiken angefertigt werden, die nicht wenig Zeit verbrauchen und damit Kosten verursachen.

3.0.  Alternativen

3.1. Flash

Im Bereich von interaktiven Medien führen irgendwann alle Wege zu Flash. Und eine einfach imagemap mit diesem Programm zu erstellen, ist keine der schwierigsten Übungen:

Wer jedoch Flash nur hin- und wieder einsetzt, für den ist der Aufwand der Einarbeitung in die Bedienung recht groß und auch die Anschaffungskosten des Programms sind nicht von Pappe. Hinzu kommt, dass Flashinhalte von Suchmaschinen nicht erfassbar sind. Deswegen ist hier im Vorfeld immer zu abzuwägen inwieweit es um redundante Informationen geht oder ob es sich um einmalige und Inhalte handelt. Letztere sollten nicht durch eine Flashanimation ersetzt werden.

3.2. Powerpoint zu Flash konvertieren

Ja, jetzt wird es ganz eklig – ich höre schon die Aufschreie. Wenn man sich jedoch von Vorurteilen frei macht mal genauer hinsieht, was auch mit Powerpoint und Flash möglich ist, so versteckt sich auch hier eine – aus meiner Sicht – verwendbare Lösung.

PresentationPro bietet ein Tool an, mit welchem sich Powerpoint-Vorlagen in Flash konvertieren lassen. Dabei werden fast alle Effekte übernommen. Alles was man tun muss ist sich die Powerpoint Folien wie die einzelnen Seiten eines Daumenkinos vorzustellen. Durch das Verstecken von Folien ist es möglich Hover Effekte zu simulieren.

Wer sich die Kosten für das Tool sparen möchte, kann es auch mal mit slideshare.net versuchen. Hier können Powerpoint-Präsentationen hochgeladen werden, die als Flashfilm erscheinen. Allerdings kann man hier immer nur per Klick eine Folie vor und zurück schalten. Anklickbare Links innerhalb des Flashfilms habe ich noch nicht gesehen.

Fazit

In den Möglichkeiten per Javascript sehe ich nur Nachteile. CSS imagemaps können eine Möglichkeit sein, wenn das Schaubild sich eignet und nicht zu komplex ist. Am einfachsten und wenn sicher gestellt ist, dass es redundante Informationen sind, erscheint mir die Powerpoint-Lösung.

Kommentar (1)

Kommentare sind geschlossen.