Definition

Eine Imagemap zeichnet sich dadurch aus, dass ein interaktives Bild mit Hotspots besetzt ist. Diese Bildbereiche sind fest definiert und oftmals verlinkt. Wenn die Maus über diesen Bereich fährt oder ihn anklickt, wird in Folge eine bestimmte Aktion ausgeführt.

Imagemaps werden sowohl auf privaten Homepages als auch als Navigationshilfe auf Webseiten mit Preisvergleichen oder lokalen Suchmaschinen und Branchenbüchern verwendet. Es gibt viele verschiedene Arten von Imagemaps, von der Darstellung von Land- und Weltkarten über kleine Minispiele bis zu interaktiven Lernspielen.

Funktionen

Imagemaps ziehen die Aufmerksamkeit der Besucher auf die Website. Auffällige, interaktive, farbige Bildelemente erhöhen den Traffic. Vor allem für Kinder hat, zum Beispiel eine interaktive Landkarte, einen didaktischen Vorteil. Nachweislich werden der Lerneffekt und die Begeisterung bei Interaktion enorm gesteigert. Die Karte ist nicht mit Informationen überladen, denn Informationen erscheinen erst beim Hovern eines Hotspots. Mit einem Klick auf die Zusatzinformationen erscheint dann ein vorher verfasster Fachartikel mit interessanten Fakten. Die Karte ist gut strukturiert und übersichtlich, enthält aber dennoch viele Zusatzinformationen. Auf diese Weise wird die Lernfreude gesteigert und der Besucher verweilt länger auf der Website.

Karten

Es gibt verschiedene bereits vorgefertigte interaktive Karten von Deutschland. Für Baden-Württemberg gibt es eine Imagemap mit allen Regionen, Mouseover Effekt und Tooltipp für jede Region. Die Größe der Karte beträgt 360x408 Pixel. Eine ähnliche Imagemap gibt es zu den Regierungsbezirken in Baden-Württemberg.

Des Weiteren werden Karten von Schleswig Holstein, Sachsen, Mecklenburg Vorpommern mit allen Landkreisen angeboten. Einen weiteren Kartendownload gibt es für die Hansestadt Lübeck mit all ihren Stadtteilen. Auch Staaten, wie die Schweiz mit allen 26 Kantonen, Österreich mit den Bundesländern, Deutschland mit allen Bundesländern oder einschließlich aller 10 Postleitzahlenbereiche, sowie eine Weltkarte mit allen fünf Kontinenten werden angeboten. Auf Wunsch werden auch individuelle Karten erstellt.

Alle Imagemaps haben dieselben Funktionen, Mouseover Effekt und Tooltipp. Die Größe variiert nur geringfügig. Die Farben und der Farbverlauf sind frei wählbar und können mit Hilfe der Software Adobe Illustrator und Inkscape gestaltet werden. Zur Auswahl stehen drei verschiedene Versionen zur Gestaltung der Imagemaps. Es gibt Karten mit Farbwechsel und Zusatzinformationen, Farbwechsel beim Berühren mit dem Mauszeiger und es können Zusatzinformationen bei Mouseover erscheinen.

Die Installation von Imagemaps auf einer Website

Im Prinzip kann jeder eine Imagemap leicht auf einer Webseite einbinden. Je nach Zielort kann die Erstellung von Imagemaps jedoch viel Zeit in Anspruch nehmen. Die Developer-Tools sind kompliziert anzuwenden und oftmals sehr teuer. In Internetshops kann man zwischen verschiedenen Arten von Vorlagen auswählen und sie dann sowohl für den privaten, als auch für den kommerziellen Gebrauch nutzen. Noch an demselben Tag erhält man meist die nötigen Daten und eine Einbauanleitung per Email.

Man erwirbt einen vorgefertigten Code, den man dann, innerhalb weniger Minuten in das CMS integrieren kann, unabhängig davon, ob es sich um Wordpress, Joomla oder Typo 3 handelt. Es werden noch viele andere CMS-Systeme unterstützt. Auch alle aktuellen Browser, wie zum Beispiel Firefox und Internet-Explorer sowie textbasierende Browser wie zum Beispiel Lynx werden akzeptiert. Der dem Kunden zugesendete Code ist suchmaschinenfreundlich und behindertengerecht. Die Imagemaps werden mittels HTML und CSS auf der Website installiert und können somit plattformübergreifend verwendet werden. Der WYSIWYG-Editor kann ohne Codebereinigung genutzt werden.

Einige Vorschläge für die Verwendung von Imagemaps

Es gibt viele Möglichkeiten für dieses Navigationssystem.

Hier einige interessante Ideen:

Die naheliegendste Anwendung ist es einen Raum zu konstruieren. Z.B. eine geographische Karte, Konstruktionsteile von Maschinen, einen komplexen  Organismus oder ein Objekt ... Ein Klick in einen Hotspot führt zu einer genaueren Beschreibung einer verwandten Seite oder eines Abschnitts auf der weitere Informationen angeboten werden.

Sie sind eine ausgezeichnete Form der Navigation auf einer Webseite. Sie können eine Metapher für die Navigation auf der Website einrichten (zum Beispiel könnten Sie unterschiedliche Teile eines Bildes korrespondieren mit den verschiedenen Teilen eines realen Stores). Sie können auch über die Symbole von repräsentativen Ordner oder Bilder fahren. Auch hier ist die Grenze ihre Fantasie. Der relevante Teil einer Grafik kann nur aktiviert werden, wenn darauf geklickt wird.

Eine Image-Map ist sehr nützlich für große Bilder; in diesem Fall kann es wünschenswert sein, dass der Link sich nur in einem Teil des Bildes befindet.
Image-Maps lassen sich wie eine didaktische Ressource benutzen. Wenn zum Beispiel die Links eines Bildes, nur in wichtigen Zonen angezeigt werden. Wenn das Bild einen Text enthält wird der Nutzer auf den rechten Hotspot klicken.
Wie Sie inzwischen vielleicht schon vermutet haben, reicht für die Bedienung der Image-Maps in den meisten Fällen sowohl normale Sehkraft und die Fähigkeit, die Maus zu verwenden, aus. Dies wäre auszuschließen bei behinderte Nutzern und  Anwender, die einen textbasierten Browser wie Lynux verwenden möchten. Die gewöhnliche Technik, kommentiert auf dieser Seite ist sicher. Zudem, nur bei Projekten, bei denen Sie sicher sind, das diese nur mit Empfängern ohne Bedingungen laufen, die die Nutzung der Bilder Mappen verhindern können. Für ein generelleres Vorgehen, völlig basierend auf XHTML und CCS Norm, beachten Sie die ausgezeichnete Technik dokumentiert in A list apart..
Erstellung der Image-Maps

So einfach bereiten Sie eine Image-Map vor. Die meisten der vorhandenen Web-Publishing-Programme beinhalten diese Option. Sie müssen nur das Bild auswählen und die aktiven Regionen markieren denen die entsprechenden Links zugeordnet sind.

Hotspots können rechteckig, viereckig, kreisförmig oder eine vieleckige Formen haben. Diese letzte Option ist ideal, wenn Sie eine aktive Fläche abgrenzen möchten. Für den nicht professionellen Anwender, der freie Programme (FrontPage Express oder Mozilla Composer) verwendet, ist diese Funktion nicht enthalten.

Falls sie die Möglichkeit zur Erzeugung von Image-Maps von unserem Verlag nutzen möchten, gibt es einige Freeware-Lösungen, die speziell auf dieses Ziel abgestimmt sind. Zum Beispiel: MapMaker32; Meracl Imagemap Generator 3,4; Automata Web Hotspots ImageMapper 4,02; coolmap 3.0; TS ImageMapper 2 und andere. Sie finden diese oder ähnliche Hilfsprogramme in einem guten Programme der Server oder  www.download.com oder www.softonic.com.

Coding Imagemaps mit HTML

Was passiert wenn wir ein Programm das visuelle Image-Maps erstellt nicht nutzen wollen? Wir müssen uns ein wenig mit dem Seitenmarkup und dem HTML-Code befassen. Zuerst kann das Befassen mit dem neuen Web-Design etwas verunsichern, aber es ist nicht so schwierig, wenn man einige Bildbetrachter / Herausgeber wie PaintShop Pro oder das kostenlose IrfanView zur Hand hat. Schreiben Sie zuerst die Koordinaten des hve auf (die Ecken von Rechtecken der \"hotspots\" - es genügt den Cursor an die gewünschte Position zu bewegen und auf die Statusleiste des Programms zu achten.) Wir werden die Links mit diesen Koordinaten verbinden.
Beispiel eines erforderlichen Codes um ein Bild anzuzeigen

Zuerst muss der Verweis auf das Bild, dass wie eine Karte erscheint, auf übliche Art und Weise miteinbezogen werden. Sie können es einfach in einem beliebigen Programm, auch Composer oder FrontPage erstellen. Zur Aktivierung der Karte ist es notwendig einen zusätzlichen Tag in dem gleichen Schlüssel hinzufügen, ISMAP usemap = \"nombre_del_mapa\". Dies deutet darauf hin, dass das Bild wie ein Bild anzeigen wird. Zum Beispiel:

<img width=\"720\" height=\"528\" src=\"image-used-for-the-map.gif\" ISMAP usemap=\"#map_principal\">

Um die weitere Ausgabe zu erleichtern, können Sie ausschneiden und am unteren Rand der Seite einfügen anstatt es neben der Auszeichnung für das Bild zu positionieren:

<map name=\"mapa_principal\">
<area shape=\"rect\" coords=\"503,15,583,50\" href=\"guestbook.htm\" alt=\"Section_1\">
<area shape=\"rect\" coords=\"571,90,653,130\" href=\"features.htm\" alt=\"Section_2\">

</ Map>

Vielleicht haben sie inzwischen einen Eindruck erhalten: Sie sehen, die Karte hat zwei Tags: Die erste Karte enthält den Hinweis zur der Kommandobrücke Programm, es verhält sich wie eine Landkarte, die Namen zuordnet. Das zweite Label enthält die Koordinaten der aktiven Gebiete und den Link. (Wie in unserem Beispiel sollte ein alternativer Name ALT entsprechen.) In diesem Beispiel sind es zwei aktive rechteckige Bereiche, getrennt durch die Koordinaten die nach COORDS angeordnet sind.

Für runde und polygonale aktiven Zonen wäre der Prozess sehr ähnlich. Für das Polygon, müssen Sie die Koordinaten eines jeden Eckpunkt anordnen; für einen Kreis die Koordinaten des Punktes des Origenes und des Radius. Schauen wir uns die jeweiligen Beispiele an:

<MAP NAME=\"Map_2\">
<AREA SHAPE = \"Polygon\" COORDS = \"40, 15, 121, 40, 87, 140, 143, 125, 152, 191, 27, 208, 13, 117, 76, 97, 39, 42\" href = \"Gästebuch . htm \">
</ MAP>

<MAP NAME=\"Map_3\">
<area SHAPE=\"circle\" COORDS=\"33,27,23\" HREF=\"front.htm\">
</ MAP>
Tipps und Tricks

Denken Sie daran, Sie können Image-Maps problemlos wiederverwenden, nachdem sie erstellt wurden. Zum Beispiel, können Sie etwas in dem Bild ändern (als Beispiel markieren  Sie einen Abschnitt). Verwenden Sie genau die gleiche Markup, die Sie für die erste Instanz der Karte erstellt haben.

Wir haben bereits erwähnt, dass die Image-Maps viel Mühe bei der Neugestaltung der Website sparen können. Wenn die Navigation auf Image-Maps basiert, wird es ausreichend sein, um die Image-Datei zu ändern, auf die Lins hinzugefügt wurden. Dieser Ansatz wurde bereits in der katalanischen Version dieses Handbuchs verwendet. (Das ursprüngliche, im Jahr 1998 veröffentlicht wurde.)

Zur Übertragung eines anderen Bildes für jeden Abschnitt im Web, anders als beim vorhergehende Trick, behalten wir die Begriffserklärung der Bilder Mappe bei und ändern wahlweise das Bild für jeden Abschnitt auf der Website.Sie brauchen noch nicht einmal die Bilddatei der Karte umbenennen, denn jeder Abschnitt Ihrer Website befindet sich in einem separaten Verzeichnis. In diesem Fall würde man einfach für jedes dieser Verzeichnisse ein anderes Bild hochladen. Ein sehr einfacher Trick: Sobald Image-Maps definiert werden, wird für jedes Bild ein anderer Abschnitt benutzt. Das entsprechende Symbol tritt hervor, während der Rest unscharf erscheint oder gedimmt wird. Es funktioniert zuverlässig, ist extrem einfach, und es verleiht einen ausführlichen, professionellen Eindruck.

Für die Vorbereitung der Bilder für Projekte wie die oben kommentierte, finden Sie sehr praktische Grafik-Programme, die einige Filter enthalten.. Ausgehend von einer Basis eines Bildes, können diverse farbige Varianten, die zu den verschiedenen Abschnitten des Webs entsprechen hinzugefügt werden.

Sie können auch Sitewide Veränderungen in Ihrem Image-Maps mit der Karte selber durchführen. Alle Image-Maps, die auf einer Internetseite die Änderung einer einzigen Karte anzeigen können sie zu einer Definitionsdatei aktualisieren. Um alle Karten des Bildes, einer einheitlichen Definition zuzuordnen genügt eine bestimmten HTML-Datei. Dadurch wird sichergestellt, dass das so einfach wie möglich wird. Auch wenn die meisten Programme Sitewide Durchsuchungen enthalten, sind Änderungen leicht durchzuführen.

Um dynamischen Aktionen (wie Mouseovers) in eine aktive Zone einer Image-Map zuzuweisen kann es notwendig sein, einen kleinen Trick anzuwenden. Wenn wir eine sehr moderne und leistungsfähige Web-Publishing-Programm verwenden, (Z.B. NetObjects Fusion oder Dreamweaver 3 + )

Bei älteren Programmen müssten Sie Folgendes tun:

   1. Wir bestimmen die Karte vom Bild mit einem Bild (A).
   2. Wir legen das zweite Bild in seiner Position fest (B), die sich ändern beim Bewegen der Maus auf einen Teil der Karte.
   3. Wir stellen ein Abbild jeder (C) an anderer Stelle der Seite und mit ihr die Wirkung der Änderung des Erscheinungsbildes für B.
   4. Wir öffnen ein Fenster mit HTML-Code kopiert und den Code von dieser Aktion, dass der Wechsel in B. macht
   5. Wir fügen diesen Code unter die Definition der Verbindungen der Image-Map ein, die wir verwenden möchten, um die Aktion auszulösen.
   6. Jetzt können wir sicher Bild C löschen (wir benutzten es nur um das Skript, dass wir einfach kopiert und eingefügt haben, vorzubereiten.)

  ...zeigen grafische Inhalte. Durch visuelle Effekte werden Veränderungen des Bildes (Mouseover-Effekt) erreicht. Dennoch haben viele Designer die Bild-Karten-Technik vergessen. Die "traditionelle" Technik enthält Image-Maps. Image-Maps sind ein hervorragendes Werkzeug zur Navigation für eine Website und voller Vorteile. Viel einfacher zu erstellen, leichter zu aktualisieren, und sie sind wirklich anspruchsvoll. In dem folgenden Artikel werden wir ihnen alle notwendigen Hinweise erläutern, sie zu nutzen und in Anspruch zu nehmen.

Dieser Artikel stellt einige grundlegende Konzepte und Möglichkeiten von Image-Maps in Web-Design vor. Es gibt einige Probleme mit Text-basierten Browsern und Fragen über die Zugänglichkeit mit Image-Maps, die mit einigen neuen CSS-basierten Techniken wie der in der A List Apart Artikel vermieden werden können.

Wie komme ich an eine Imagemap?

Imagemaps sind zwar relativ leicht in HTML einzubinden, aber deren Erstellung kann je nach Ziel sehr zeitaufwendig sein, und die Developer-Tools sind zudem kompliziert. Zum Glück kann man heutzutage aber auch auf vorgefertigte Imagemap Karten zurückgreifen: In unserem Shop finden Sie zahlreiche Imagemap Vorlagen für den kommerziellen als auch privaten Einsatz. Bei Fragen schreiben Sie uns gern. Wir helfen Ihnen gerne beim Einbau der Image Map in ihr Projekt. Bitte achten Sie darauf, dass Sie immer die Zahlenfolge im untenstehenden Textfeld eingeben müssen, bevor die Nachricht uns erreichen kann. Telefonisch stehen wir Ihnen auch gern zur Verfügung, sollten wir einmal nicht erreichbar sein, bitten wir um Verständnis....probieren Sie es gern erneut...Vielen Dank für ihr Verständnis.

Panorama-Bilder, professionelle Fotos in HD, Landkarten oder Diagramme kann man sich ebenfalls nach eigenen Vorstellungen erstellen und verlinken. Imagemaps gehen einen neuen, innovativen Weg um Medien noch interessanter für Besucher zu machen.

Mal Hand aufs Herz: Bilder kann doch heutzutage jeder auf seiner Website einpflegen, aber mit einer hochwertigen Imagemap sind Ihnen bewundernde Blick garantiert!

Es die kleinen Details, die uns von der Konkurrenz unterscheiden und mit denen wir uns am Ende den Erfolg doch noch sichern. Mit interaktiven Landkarten bieten Sie 3 Dinge zugleich: Bild, Text und Links.

Somit können Sie durch grafische Möglichkeiten eine Image Map nach ihren Vorstellungen für sich beanspruchen.

Eine Deutschlandkarte beispielsweise wird im Imagemapverfahren in 16 Bereiche unterteilt, in denen jeder Bereich folgerichtig für ein Bundesland steht. Klickt nun ein Besucher auf einen bestimmten Bereich, wird er zu weiteren - für ihn relevanten - Informationen geleitet. Hat der Besucher zum Beispiel auf das Bundesland Schleswig-Holstein geklickt , werden ihm auf der nächsten Seite Informationen zu Regionen aus Schleswig-Holstein ( Mittelholstein, Nordfriesland, Schwansen,etc.) bereitgestellt. Praktisch, nicht wahr?

Imagemaps helfen Ihnen also auch die Vielzahl an Informationen nutzerfreundlich zu organisieren, damit jeder Besucher Ihrer Website das findet, wonach er sucht.

Imagemaps lassen sich unglaublich leicht in Websites integrieren, vorgefertigten Code kann man in Shops erwerben, der sich plattformübergreifend in nahezu jedes CMS embetten lässt. Das heisst, Sie benötigen oft nur ein paar Minuten und schaffen damit langfristig einen positiven Mehrwert für Ihre Website.

Hier mal ein Beispiel anhand der "Image Map Deutschland":

Hovern Sie über ein Bundesland, wie zum Beispiel Berlin (Wenn Sie mit dem Mauszeiger auf die entsprechende Fläche gehen), wird der Hotspot sofort farbig hervorgehoben und es können sich automatisch weitere Zusatzinfos (Hauptstadt, Bevölkerung, etc) einblenden . Mit einem Klick auf den anvisierten Hotspot (hier: Bundesland Berlin) gelangen Sie dann zu einem vorher verfassten Fachartikel, der weitere interessante Fakten zum Bundesland Berlin liefert. Auf diese interaktive Weise können Sie mit einer Imagemap auf spielerische Art und Weise zum Beispiel Deutschland erkunden.

Imagemaps sind nützlich und faszinierend zugleich

Einfach mit dem Mauszeiger über einen bestimmten Bildbereich hovern und schon werden weiteren Aktionen ausgelöst. So erkennt auch der weniger web-affine Betrachter sofort, dass sich hinter diesem Bild-Bereich weitere Informationen befinden müssen. Nur ein Klick reicht aus und der Betrachter gelangt umgehend auf eine weitere Unterseite, die tiefergehendes Wissen bietet.

Besucher lieben Imagemaps

Jeder Webmaster kann sich eine Imagemap in seine Website einpflegen, z.B. um Besucher zu beeindrucken oder um eine innovativere, spannendere Alternative zu herkömmlicher Navigation zu bieten. Eine Imagemap nutzt nämlich die Macht der Bilder gekonnt aus und beherzigt wichtige Erkenntnisse einer jeden positiven Benutzererfahrung : Zeige nicht alle Informationen, sondern zeige die richtige Information zur richtigen Zeit , wenn sie gebraucht wird.

Imagemaps günstig im Shop bestellen

Wenn Sie an einer Imagemap interessiert sind, besuchen Sie bitte unseren Web-Shop, dort finden Sie ein reichhaltiges Angebot an vorgefertigten, günstigen Imagemap Vorlagen zum Sofort-Download. Suchen Sie sich dort einfach Ihre Lieblingskarte aus, wir senden Ihnen noch am selben Tag alle wichtigen Daten mit Einbauanleitung per Email zu. Anschließend genügen ein paar Mausklicks und schwupps haben Sie eine völlig interaktive Imagemap auf Ihrer Homepage stehen, die Ihre Besucher mit Text, Farben und Links begeistern wird! 

Einer der größten Vorteile unserer hochwertigen Imagemap-Vorlagen besteht in der Tatsache, dass Sie überhaupt keine technische Skills benötigen, um Ihre Website mit einer beeindruckenden Imagemap auszuschmücken. Auf Wunsch bieten wir Ihnen sogar einen Installationsservice, einfach bei Ihre Bestellung angeben und wir übernehmen alle weiteren Arbeiten für Sie.

Vorteile solch einer Navigation

Imagemaps sind nützlich und faszinierend zugleich

Einfach mit dem Mauszeiger über einen bestimmten Bildbereich hovern und schon werden weiteren Aktionen ausgelöst. So erkennt auch der weniger web-affine Betrachter sofort, dass sich hinter diesem Bild-Bereich weitere Informationen befinden müssen. Nur ein Klick reicht aus und der Betrachter gelangt umgehend auf eine weitere Unterseite, die tiefergehendes Wissen bietet.

Besucher lieben Imagemaps

Jeder Webmaster kann sich eine Imagemap in seine Website einpflegen, z.B. um Besucher zu beeindrucken oder um eine innovativere, spannendere Alternative zu herkömmlicher Navigation zu bieten. Eine Imagemap nutzt nämlich die Macht der Bilder gekonnt aus und beherzigen wichtige Erkenntnisse einer jeden positiven Benutzererfahrung : Zeige nicht alle Informationen, sondern zeige die richtige Information zur richtigen Zeit (nämlich dann, wenn sie auch gebraucht wird).

Imagemaps günstig im Shop bestellen

Wenn Sie an einer Imagemap interessiert sind, dann besuchen Sie bitte unseren Web Shop, dort finden Sie ein reichhaltiges Angebot an vorgefertigten, günstigen Imagemap Vorlagen zum Sofort-Download. Suchen Sie sich dort einfach Ihre Lieblingskarte aus, wir senden Ihnen noch am selben Tag alle wichtigen Daten mit Einbauanleitung (per Email) zu. Anschließend genügen ein paar Mausklicks und schwupps haben Sie eine völlig interaktive Imagemap auf Ihrer Homepage stehen, die Ihre Besucher mit Text, Farben und Links begeistern wird!

Einer der größten Vorteile unserer hochwertigen Imagemap-Vorlagen besteht in der Tatsache, dass Sie überhaupt keine technische Skills benötigen, um Ihre Website mit einer beeindruckenden Imagemap auszuschmücken. Auf Wunsch bieten wir Ihnen sogar einen Installationsservice, einfach bei Ihre Bestellung angeben und wir übernehmen alle weiteren Arbeiten für Sie.