Intelligente Imagemaps

Komfortabel sind sie, die Imagemaps. Sie klicken auf ein bestimmtes Motiv eines Bildes und in Abhängigkeit vom Motiv passiert etwas. Was aber, wenn Sie das gewünschte Motiv um einen Pixel verfehlen oder wenn mehrere Aktionen auf einem Bildmotiv liegen? Dann hilft eine intelligente Variante der Imagemaps weiter!

Unscharfe Treffer

Stellen Sie sich vor, Sie suchen ein Restaurant in Ihrer Umgebung, gehen ins Internet und klicken auf eine vorbereitete Land- oder Straßenkarte. Das System zeigt Ihnen natürlich ein Restaurant an, wenn Sie es perfekt per Mausklick erwischen, aber wäre es nicht praktisch, auch jene Restaurants angezeigt zu bekommen, die in der näheren "Umgebung des Mausklicks" liegen? Oder das Bild eines menschlichen Körpers: Sie klicken auf den Bauchnabel und das System teilt Ihnen mit, dass sich in der Nähe des Klicks der Magen oder der Darm, nicht aber das Gehirn befinden. Unser Skript bietet diese und andere Bequemlichkeiten. Ausgangspunkt ist ein Foto, dessen Größe und Position auf der Webseite bekannt sein muss. Dieses Foto wird innerhalb eines absolut positionierten DIVs platziert. Zusätzlich muss das Skript ständig wissen, an welcher Stelle der Webseite sich der Mauszeiger gerade befindet. Das DIV wird mit einem onClick- Event versehen, das die JavaScript-Funktion "position()" aufruft. Jeder Klick auf das Bild sorgt für eine Analyse innerhalb der Funktion.

Mit Analyse

Die Analyse beginnt mit der Kennzeichnung des Mausklicks. Dafür steht ein DIV zur Verfügung, das 5x5 Pixel groß ist und per CSSKlasse (markierung) in seinen Eigenschaften definiert wird. Nach dem Start der Seite ist dieses DIV per "visibility : hidden;" unsichtbar geschaltet. Nach dem Mausklick auf das Bild werden die Koordinaten der Mausposition auf die Position des DIV-Containers mit einem leichten Links- und Obenversatz übertragen. Das Skript weist die Positionen zu und schaltet das DIV auf sichtbar, die visuelle Kennzeichnung ist erledigt.

Die eigentliche Positionsanalyse passiert auf Basis einer kleinen Datenbank, die in der Feldvariablen "a" gespeichert wird. Sie finden im Beispielskript Namen und Koordinaten der Kennzeichnungen im Bild. Das Skript arbeitet nun in einer Laufanweisung alle gespeicherten Daten ab.

Im ersten Schritt wird verglichen, ob die Linksund Obenkoordinate des Mauszeigers in einem Bereich plusminus 5 Pixel der gespeicherten Koordinaten der Datenbankeinträge liegen. Ist das der Fall, wird der Name des Datenbankeintrags in der Variablen "ort" gespeichert. So ist sichergestellt, dass in "ort" nur dann ein Eintrag abgelegt wird, wenn der Mausklick eine durch die Datenbank definierte Position sehr exakt getroffen hat.

Im zweiten Schritt wird ein weiterer Ähnlichkeitsvergleich durchgeführt. Liegt der Mauszeiger in einer Umgebung von plusminus 50 Pixel bei Einträgen aus der Datenbank, so werden diese Namen im Array "b" gesichert. Praktisch können Sie weitere Entfernungen abfragen. Sie benötigen lediglich ein weiteres Array und eine weitere Abfrage mit einer größeren Toleranz als 50, um weitere Positionen in der Datenbank zu erkennen.

Wenn die Tests durchlaufen sind, liegt ein möglicher exakter Treffer in "ort", alle Treffer in einem Bereich finden sich in "b". Mit diesen Fundstellen können Sie weiterarbeiten. Im Beispielskript wird eine exakte Fundstelle in einem speziellen Ausgabe-DIV angezeigt. Ebenso wird die Liste, der in "b" gesicherten Umgebungstreffer in einem weiteren Ausgabe- DIV angezeigt. Mit diesen Ausgaben können zum Beispiel Links gesetzt werden. Dazu müssen Sie lediglich das Array "a" um einen existierenden Link erweitern und in der Ausgabe der Treffer neben dem eigentlichen Namen auch dessen Verlinkung definieren.

Trickreiche Ausgabe

Bei der Ausgabe der Umgebungstreffer muss eine Kleinigkeit beachtet werden. Ein Exakttreffer erfüllt sowohl die Abfrage mit der kleinen Toleranz als auch die Abfrage mit der größeren Toleranz. Demzufolge findet sich die Kennzeichnung des Exakttreffers auch in der Liste der Umgebungstreffer. Bei der Verarbeitung der Umgebungstreffer wird deshalb ein möglicher Exakttreffer mit dem aktuell zu verarbeitenden Umgebungstreffer verglichen. Stimmen die beiden Kennzeichnungen überein, wird genau dieser Umgebungstreffer nicht verarbeitet.

Mausposition ermitteln

Damit das Skript überhaupt arbeiten kann, muss die Mausposition ermittelt werden. Wir haben es uns hier einfach gemacht und auf die entsprechenden Funktionen der Kompatibilitäts- Library zurückgegriffen, die wir vor einiger Zeit im Internet Magazin erarbeitet haben. Im Skript finden Sie deshalb einen Zugriff auf die Datei "komplibrary.js", die natürlich auf der Heft-DVD abgelegt wurde. Die dort gesicherte Funktion "MausBewegung[Event]" legt die Koordinaten der Maus ständig in den Variablen "mx" und "my" ab und kann so von der Funktion "position()" genutzt werden.

Wenn Sie nicht die gesamte Kompatibilitäts- Library für diese Anwendung nutzen wollen, können Sie die notwendigen Passagen daraus auch direkt in den Skript-Bereich Ihrer HTMLSeite einfügen. Kopieren Sie dazu einfach die Variablen-Definitionen am Anfang der Library und die beiden Funktionen "Maus UeberwachungEinschalten()" sowie "Maus- Bewegung(Event)" in Ihr Dokument. Wollen Sie die Anzeige der aktuellen Mausposition komplett aus dem Skript entfernen, löschen Sie die folgenden Zeilen aus der Funktion "MausBewegung(Event)" heraus.

Datenbank generieren

Ganz gleich, welcher Art Ihre Anwendung ist, eine Datenbasis muss her. Sie finden sie im mehrdimensionalen Array "a". Das Skript benötigt die Bezeichnung der Fundstelle und die x- und y-Koordinate im Bild. Darüber hinaus können Sie jeden Datensatz für Ihre Anwendung beliebig erweitern, zum Beispiel für die Verlinkung oder aber auch für Adressen von Bildern, die dann auf der Webseite eingeblendet werden können.

Damit Sie ohne viel Rechenaufwand die Positionen der Fundstellen ermitteln können, haben wir im Beispielskript zwei Input-Felder definiert. Diese Input-Felder werden von der Mauspositionsfunktion aus der Kompatibilitätslibrary automatisch angesprochen und ständig mit den aktuellen x- und y-Koordinaten des Mauszeigers gefüttert. Beide Input-Felder liegen in einem DIV-Container, der mit der CSS-Klasse "anzeige" formatiert wurde. Wenn Sie die Datenbasis generieren, rufen Sie einfach die Webseite auf und führen den Mauszeiger an die Position auf dem Bild, an der Sie einen Eintrag setzen wollen. Sie können jetzt in den beiden Input-Feldern die Koordinaten ablesen und gleich im Array mit dem Eintrag des Namens einschreiben. Wenn Sie alle Einträge definiert haben, setzen Sie in der Klasse "anzeige" die "visibility" auf "hidden". Das Fenster mit den Koordinaten wird ab sofort nicht mehr angezeigt.

Positionsveränderung

Im Skript ist die Karte im DIV auf die Position 0/0 der Webseite gesetzt. Demzufolge sind die gespeicherten Koordinaten in der Datenbank auf diese Positionen geeicht. Wenn Sie das DIV mit dem Bild in der Folge an eine andere Position verschieben, stimmen die Koordinaten in der Datenbank nicht mehr mit den hinterlegten Positionen überein. Sie müssen in solchen Fällen natürlich nicht die Koordinaten umschreiben. Innerhalb der Funktion "position" werden die Variablen "links" und "oben" mit den aktuell ermittelten Mauspositionen gefüttert. Bei einer Veränderung der Position des DIV-Containers ziehen Sie einfach die in der Klasse "karte" definierten Werte für "left" und "top" von "links" und "oben" ab. Danach stimmen die Werte wieder mit den Positionen der Karte überein.

Versteckte Einträge

Im Beispielskript sehen Sie eine Landkarte mit einigen Städten. Das Schöne an dieser intelligenten Imagemap ist, dass Einträge innerhalb der Datenbank unabhängig vom abgebildeten Foto sind. Das bedeutet, Sie können auch Einträge definieren, die nicht sichtbar auf der Karte markiert wurden. Das ist ein Vorteil, denn Sie müssen die Karte nicht bei jedem Neueintrag grafisch verändern. Die Karten werden somit übersichtlich und die Daten trotzdem verfügbar gemacht.

Die Umgebungstreffer

Wenn Sie diese intelligente Imagemap auf eine Landkarte legen, können Sie über den zweiten Toleranzwert, der die Umgebungstreffer aufspürt, tatsächliche geografische Entfernungen simulieren. Der Toleranzwert definiert einen quadratischen Sektor, wobei der Mausklick im Mittelpunkt des gedachten Quadrats liegt. Wenn Sie die Pixel geschickt mit dem Maßstab der Karte justieren, können Sie auf diese Weise etwa alle Städte suchen lassen, die sich im Planquadrat mit den simulierten Seitenlängen von 10 oder 20 Kilometern befinden. Bestimmen Sie dabei per Maßstab die Länge in Kilometern oder Metern vom oberen bis zum unteren Rand der Karte. Teilen Sie den Wert durch die Pixel, die der Höhe entsprechen. Sie erhalten dann die Länge in Kilometern, die genau ein Pixel abdeckt. Multiplizieren Sie danach die Länge des gewünschten Planquadrats mit der ermittelten Pixelanzahl und Sie erhalten den Toleranzwert für die Umgebungssuche.