In der Geschichte des Webdesigns gab es einen Punkt, an dem viele Websites eine Funktion verwendeten, die als "Imagemaps" bezeichnet wird. Dies ist eine Liste von Koordinaten, die an ein bestimmtes Bild auf einer Seite angehängt sind. Durch diese Koordinaten werden Hyperlink-Bereiche in diesem Bild erstellt, die einer Grafik "Hot Spots" hinzufügen, von denen jeder so codiert werden kann, dass er mit verschiedenen Orten verknüpft wird. Dies unterscheidet sich wesentlich vom Hinzufügen eines Link-Tags zu einem Bild, wodurch die gesamte Grafik zu einem großen Link zu einem einzelnen Ziel wird.
Beispiele: Stellen Sie sich vor, Sie hätten eine Grafikdatei mit einem Bild der Vereinigten Staaten. Wenn Sie möchten, dass jeder Status "anklickbar" ist, sodass er zu Seiten zu diesem bestimmten Status wechselt, können Sie dies mit einer Image-Map tun. Wenn Sie ein Bild von einer Musikband hatten, könnten Sie eine Bildkarte verwenden, damit jedes einzelne Mitglied auf eine nachfolgende Seite über dieses Bandmitglied anklickbar ist.
Klingen Bildkarten als nützlich? Das waren sie auf jeden Fall, aber sie sind im heutigen Web in Ungnade gefallen. Dies liegt zumindest teilweise daran, dass Image Maps bestimmte Koordinaten erfordern, um zu funktionieren. Heutige Sites sind darauf ausgelegt, reaktionsschnell zu sein, und die Bilder werden anhand der Größe eines Bildschirms oder Geräts skaliert. Dies bedeutet, dass voreingestellte Koordinaten, wie Bilder funktionieren, auseinander fallen, wenn eine Site skaliert und die Größe der Bilder geändert wird. Aus diesem Grund werden Image Maps heutzutage selten auf Produktionsseiten verwendet, sie bieten jedoch Vorteile für Demos oder Fälle, in denen Sie die Größe einer Seite erzwingen.
Möchten Sie wissen, wie Sie eine Imagemap erstellen, insbesondere wie dies mit Dreamweaver möglich ist? Der Prozess ist nicht besonders schwierig, aber es ist auch nicht einfach, also sollten Sie etwas Erfahrung haben, bevor Sie beginnen.
Fertig machen
Lass uns anfangen. Als ersten Schritt müssen Sie ein Bild zu Ihrer Webseite hinzufügen. Sie klicken dann auf das Bild, um es hervorzuheben. Von dort müssen Sie zum Eigenschaften-Menü gehen (und auf eines der drei Hotspot-Zeichenwerkzeuge klicken: Rechteck, Kreis oder Polygon. Vergessen Sie nicht, Ihr Bild zu benennen, was Sie in der Eigenschaftsleiste tun können. Sie können einen Namen geben Sie können alles, was Sie möchten. Verwenden Sie "map" als Beispiel.
Zeichnen Sie nun mit einem dieser Werkzeuge die gewünschte Form für Ihr Bild. Wenn Sie rechteckige Punkte benötigen, verwenden Sie das Rechteck. Gleiches für den Kreis. Wenn Sie komplexere Hotspot-Formen wünschen, verwenden Sie das Polygon. Dies würden Sie wahrscheinlich am Beispiel der US-Karte verwenden, da Sie mit dem Polygon Punkte ablegen und sehr komplexe und unregelmäßige Formen im Bild erstellen können
Geben Sie im Eigenschaftenfenster für den Hotspot die Seite ein, in der der Hotspot verlinkt werden soll. So entsteht dieser verknüpfbare Bereich. Fügen Sie weitere Hotspots hinzu, bis Ihre Karte vollständig ist und alle Links hinzugefügt wurden, die Sie hinzufügen möchten.
Wenn Sie fertig sind, überprüfen Sie Ihre Imagemap in einem Browser, um sicherzustellen, dass sie ordnungsgemäß funktioniert. Klicken Sie auf jeden Link, um sicherzustellen, dass die richtige Ressource oder Webseite angezeigt wird.
Nachteile von Image Maps
Beachten Sie auch hier, dass Image-Maps auch außerhalb der oben genannten mangelnden Unterstützung für responsive Websites einige Nachteile haben. Erstens können kleine Details in einer Imagemap verdeckt werden. Zum Beispiel können geographische Bildkarten dazu beitragen, zu bestimmen, von welchem Kontinent ein Benutzer stammt, aber diese Karten sind möglicherweise nicht detailliert genug, um das Herkunftsland des Benutzers zu ermitteln. Dies bedeutet, dass eine Imagemap dazu beitragen kann, zu bestimmen, ob ein Benutzer aus Asien kommt, insbesondere nicht aus Kambodscha.
Image Maps werden möglicherweise auch langsam geladen. Sie sollten auf einer Website nicht mehrmals verwendet werden, da sie zu viel Platz beanspruchen, um auf jeder Seite einer Website verwendet zu werden. Zu viele Imagemaps auf einer einzigen Seite würden zu erheblichen Engpässen führen und die Site-Performance massiv beeinträchtigen.
Schließlich ist der Zugriff auf Bildkarten für Benutzer mit visuellen Problemen möglicherweise nicht einfach. Wenn Sie Imagemaps verwendet haben, sollten Sie alternativ ein anderes Navigationssystem für diese Benutzer erstellen.
Endeffekt
Verwenden Sie von Zeit zu Zeit Imagemaps, wenn Sie versuchen, eine schnelle Demo eines Designs und dessen Funktionsweise zusammenzustellen. Wenn Sie beispielsweise ein Design für eine mobile App simulieren, und mithilfe von Imagemaps Hotspots erstellen möchten, um die Interaktivität der App zu simulieren. Dies ist viel einfacher zu tun, als die App zu codieren oder sogar Dummy-Webseiten zu erstellen, die mit HTML und CSS nach aktuellen Standards erstellt wurden. Das Einfügen in eine Produktions-Site oder eine App ist jedoch sehr schwierig und sollte auf heutigen Websites wahrscheinlich vermieden werden.
