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.
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
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:
- http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
- http://www.mediaevent.de/xhtml/map.html
- http://www.elated.com/articles/creating-image-maps/
Nachteile dieser Konstruktion sind :
[-] Nur-Text-Browser oder bei deaktivierten Bildern bieten keine Orientierung mehr. Die map ist dann praktisch nicht mehr nutzbar. User von Textbrowsern stehen demnach so ziemlich im Regen. Ein mögliche Abhilfe kann sein, Formulare in imagemaps zu verwenden.
Ein lesenswerter Artikel hierzu:
- http://www.barrierefreies-webdesign.de/knowhow/image-maps/client_statt_serverseitige_image-maps.html
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.
- http://www.tutorialspoint.com/javascript/javascript_image_map.htm
- http://jquery.bassistance.de/tooltip/demo/
- http://www.mediaevent.de/xhtml/area.html
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:
- http://green-beast.com/experiments/css_map_pop.php
- http://www.alistapart.com/d/sprites/ala-blobs2.html
- http://www.cssplay.co.uk/menu/imap.html
- http://www.cssplay.co.uk/menu/old_master.html
- http://www.cssplay.co.uk/articles/imagemap/index.html
- http://www.cssplay.co.uk/menu/scrollmap
- http://frankmanno.com/ideas/css-imagemap-redux/
[+] 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.
Hey, danke für die Empfehlung meines Image Map Makers! Auch sonst, danke für die Informationen zu den CSS Imagemaps.