In der Praxis erlebe ich es des \u00f6fteren, dass Kunden auf andere Webseiten verweisen auf denen interaktive Darstellungen zum Einsatz kommen, nat\u00fcrlich mit dem Wunsch „so etwas“ auch auf den eigenen Seiten haben zu wollen. Ohne ein entsprechendes Hintergrundwissen ist es jedoch eine Fehleinsch\u00e4tzung zu meinen, dass solche Dinge zum Alltag des Webdesigns geh\u00f6ren w\u00fcrden 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\u00f6pfe man dr\u00fccken muss, damit Inhalte z.B. in einem popup angezeigt werden oder dass die actionreiche Powerpoint-Pr\u00e4sentation ebensogut im content-Bereich einer Webseite erscheint.<\/p>\n
Verweissensitive Grafiken bieten sich an um Inhalte einmal anders aufzubereiten, als in blo\u00dfen Beschreibungen. Und genau damit habe ich mich in letzter Zeit ein bisschen eingehender besch\u00e4ftigt. Ausgangspunkt war die altbekannte imagemap und damit fange ich hier einmal an:<\/p>\n
Im einfachsten Fall ist eine imagemap nichts weiter als eine Grafik, auf der ein Link ausgef\u00fchrt werden kann. Klickt der Benutzer mit der Maus auf bestimmte Bereiche, wird ein Verweis ausgef\u00fchrt.<\/p>\n
Die verweissensitiven Bereiche k\u00f6nnen eckig (shape=“rect“), rund (shape=“circle“) oder polygonal (shape=“poly“) sein. Der Klicksensitive Bereich wird dabei mit Koordinaten umschrieben.<\/p>\n
Nun ist es noch relativ einfach diese Koordinaten z.B. f\u00fcr den rechteckigen Bereich zu finden und anzugeben, im Zweifelsfall schafft man das mit ein bisschen \u00dcberlegung selber. Richtig interessant sind die Einsatzgebiete von Rechtecken aber nicht, weshalb wohl schnell der Polygonzug in das Zentrum des Interesses r\u00fccken wird. Wer Bedarf an ein bisschen Sysiphusrabeit hat, kann auch die Koordinaten f\u00fcr den Ploygonzug zu Fu\u00df eingeben
\nhttp:\/\/www.html-world.de\/program\/html_14.php
\nEine weitere M\u00f6glichkeit bietet aber z.B. auch Dreamweaver. Hier ist eine Funktion zur Erstellung von imagemaps integriert.<\/p>\n
Kann man also mit Hilfe eines Tools unkompliziert die Koordinaten zusammenstellen, ist die imagemap schnell zusammengebaut:<\/p>\n
Nachteile dieser Konstruktion sind :<\/strong><\/p>\n [-] 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\u00f6gliche Abhilfe kann sein, Formulare in imagemaps zu verwenden. Allerdings ist das sicherlich keine korrekte L\u00f6sung im Sinne des semantischen Webs und \u201ewhat you mean is what you get\u201c.<\/p>\n [-] Suchmaschinen verfolgen die in einer Image Map enthaltenen Links nicht. Die M\u00f6glichkeiten der klassischen imagemap (Anwendungsbeispiel von self-html) werden jedoch in den meisten F\u00e4llen nicht das sein, was Webdesigner bzw. deren Kunden w\u00fcnschen. Sollen Diagramme und Schaubilder dargstellt werden, reicht es nicht lediglich einen Tooltip einzubinden, der beim Dr\u00fcberhovern eine Textinformation anzeigt.<\/p>\n 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\u00fcr jedoch sind allerlei Kunstst\u00fcckchen via Javsascript m\u00f6glich.<\/p>\n In die Kategorie der Imagemaps mit Javascript kann man auch noch eine weitere M\u00f6glichkeit einordnen: Sowohl Corel Photopaint als auch Photoshop bieten die M\u00f6glichkeit so genannte Rollover und auch imagemaps<\/strong> 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\u00f6sung ist.<\/p>\n Es macht an dieser Stelle keinen Sinn, imagemaps mit Javascript weiter zu vertiefen, denn es gibt daf\u00fcr auf CSS basierende bessere L\u00f6sungen.<\/p>\n Eigentlich muss man sagen: Pseudo-imagemap, denn im Grunde handelt es sich um eine Liste oder Definitionsliste, in welcher die Links absolut positioniert werden.<\/p>\n Hierzu gibt es zahlreiche Beispiele im Netz:<\/p>\n [+] Diese Art von imagemaps erzeugt ein sauberes Markup und funktioniert weitestegehend in allen Browsern. [-] Der gro\u00dfe Nachteil ist jedoch, dass man keine unregelm\u00e4\u00dfigen Bereich definieren kann. Der Hover-Effekt wird durch das Auswechseln eines Hintergrundbildes des Linkelementes a realisiert. Der klicksensitive Bereich ist deswegen u.Umst\u00e4nden gr\u00f6\u00dfer als erforderlich und immer rechteckig. Im Bereich von interaktiven Medien f\u00fchren irgendwann alle Wege zu Flash. Und eine einfach imagemap mit diesem Programm zu erstellen, ist keine der schwierigsten \u00dcbungen. Wer jedoch Flash nur hin- und wieder einsetzt, f\u00fcr den ist der Aufwand der Einarbeitung in die Bedienung recht gro\u00df 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\u00e4gen inwieweit es um redundante Informationen geht oder ob es sich um einmalige und Inhalte handelt. Letztere sollten nicht durch eine Flashanimation ersetzt werden.<\/p>\n Ja, jetzt wird es ganz eklig \u2013 ich h\u00f6re schon die Aufschreie. Wenn man sich jedoch von Vorurteilen frei macht mal genauer hinsieht, was auch mit Powerpoint und Flash m\u00f6glich ist, so versteckt sich auch hier eine \u2013 aus meiner Sicht \u2013 verwendbare L\u00f6sung.<\/p>\n PresentationPro bietet ein Tool an, mit welchem sich Powerpoint-Vorlagen in Flash konvertieren lassen. Dabei werden fast alle Effekte \u00fcbernommen. 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\u00f6glich Hover Effekte zu simulieren.<\/p>\n Wer sich die Kosten f\u00fcr das Tool sparen m\u00f6chte, kann es auch mal mit slideshare.net versuchen. Hier k\u00f6nnen Powerpoint-Pr\u00e4sentationen hochgeladen werden, die als Flashfilm erscheinen. Allerdings kann man hier immer nur per Klick eine Folie vor und zur\u00fcck schalten. Anklickbare Links innerhalb des Flashfilms habe ich noch nicht gesehen.<\/p>\n In den M\u00f6glichkeiten per Javascript sehe ich nur Nachteile. CSS imagemaps k\u00f6nnen eine M\u00f6glichkeit 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\u00f6sung.<\/p>\n","protected":false},"excerpt":{"rendered":" Manche Produkte und Dienstleistungen sind nicht einfach zu erkl\u00e4ren. Wenn die Angebotspalette breit gef\u00e4chert und zus\u00e4tzlich in der Tiefe stark differenziert ist, muss man im Webdesign auch mal an M\u00f6glichkeiten denken, von denen seltener Gebrauch gemacht wird \u2013 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\u00fcr durchaus vertr\u00e4glich, alternativ (und redundant) auch Pr\u00e4sentationenarten 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[385,386,387,14,173,285,289,383,384],"yst_prominent_words":[1226,1227,1228,1229,1230,1231,1232,1233,1234,1235,531,1236,537,1237,633,1238,745,1240,927,1069],"class_list":["post-1508","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-imagemaps","tag-powerpint","tag-schaubilder","tag-webdesign-2","tag-flash","tag-entwurfsprozesse","tag-webseitendesign","tag-css-imagemaps","tag-diagramme"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1508"}],"version-history":[{"count":3,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1508\/revisions"}],"predecessor-version":[{"id":4704,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1508\/revisions\/4704"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1508"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nEin lesenswerter Artikel hierzu:
\n<\/a><\/p>\n\n
\n[-] Es gibt von Haus aus keine Hover-Effekte.<\/p>\n1.1. Erweiterte Imagemaps<\/h3>\n
\n
2.0.\u00a0 CSS imagemaps<\/h3>\n
\n
\n[+] Als weiterer Vorteil ist, dass die eingeblendeten Textbeschreibungen echte Linktexte sind, die sich auch im Quelltext wieder finden.<\/p>\n
\n[-] Eine css-imagemap ist aufw\u00e4ndig in der Herstellung. Je nachdem wie komplex das ganze Schaubild ist, m\u00fcssen zahlreiche Einzelgrafiken angefertigt werden, die nicht wenig Zeit verbrauchen und damit Kosten verursachen.<\/p>\n3.0.\u00a0 Alternativen<\/h3>\n
3.1. <\/strong>Flash<\/h4>\n
3.2. Powerpoint zu Flash konvertieren<\/h4>\n
Fazit<\/h3>\n