Image Maps sind eine aufregende und interessante Möglichkeit, Ihre Website lebendiger zu gestalten. Mit ihnen können Sie Bilder hochladen und Teile dieser Bilder für andere Online-Assets anklickbar machen. Wenn Sie nicht in der Lage sind und keinen Karteneditor herunterladen möchten, ist das Erstellen einer Karte mit HTML-Tags unkompliziert.
Sie benötigen ein Bild, einen Bildeditor und eine Art HTML-Editor oder Texteditor. Die meisten Bildbearbeiter zeigen Ihnen die Koordinaten Ihrer Maus, wenn Sie im Bild zeigen. Diese Koordinatendaten sind alles, was Sie benötigen, um mit Image Maps zu beginnen.
Erstellen einer Imagemap
Um eine Imagemap zu erstellen, wählen Sie zuerst ein Bild aus, das als Grundlage der Karte dienen soll. Das Bild sollte "normale Größe" haben. Das heißt, Sie sollten kein Bild verwenden, das so groß ist, dass es vom Browser skaliert wird.
Wenn Sie das Bild einfügen, fügen Sie ein zusätzliches Attribut hinzu, das die Koordinaten der Karte angibt:
Wenn Sie eine Imagemap erstellen, erstellen Sie einen Bereich, der auf das Bild geklickt werden kann. Die Koordinaten der Karte müssen daher an der Höhe und Breite des ausgewählten Bildes ausgerichtet sein. Karten unterstützen drei verschiedene Arten von Formen:
- Rect - ein Rechteck oder eine vierseitige Figur
- Poly - ein Polygon oder eine mehrseitige Figur
- Kreis - ein Kreis
Um die Bereiche zu erstellen, müssen Sie die spezifischen Koordinaten isolieren, die Sie zuordnen möchten. Eine Karte kann aus einem oder mehreren definierten Bereichen im Bild bestehen, die beim Anklicken einen neuen Hyperlink öffnen.
Für ein Rechteck , kartieren Sie nur die oberen oberen und rechten unteren Ecken. Alle Koordinaten sind als x, y (über, auf) aufgeführt. So würden Sie für die obere linke Ecke 0,0 und die untere rechte Ecke 10,15 eingeben 0,0,10,15. Sie fügen es dann in die Karte ein:
Für ein Polygon , kartieren Sie jeden x, y separat koordinieren. Der Webbrowser verbindet automatisch den letzten Koordinatensatz mit dem ersten. Alles innerhalb dieser Koordinaten ist Teil der Karte.
Kreis Formen benötigen wie das Rechteck nur zwei Koordinaten, aber für die zweite Koordinate geben Sie den Radius oder die Entfernung vom Mittelpunkt des Kreises an. Für einen Kreis mit der Mitte bei 122,122 und einem Radius von 5 würden Sie also 122,122,5 schreiben:
Alle Bereiche und Formen können in demselben Map-Tag enthalten sein:
Überlegungen
Image Maps waren im Web 1.0-Zeitalter der neunziger Jahre bis in die frühen 2000er Jahre viel häufiger - Image Maps bildeten häufig die Grundlage für die Navigation einer Website. Ein Designer erstellt eine Art Bild, um Menüelemente anzuzeigen, und legt dann eine Karte fest.
Moderne Ansätze fördern das responsive Design und verwenden Cascading Style Sheets, um die Platzierung von Bildern und Hyperlinks auf einer Seite zu steuern.
Obwohl das Map-Tag noch im HTML-Standard unterstützt wird, kann die Verwendung von mobilen Geräten mit kleinen Formfaktoren zu unerwarteten Leistungsproblemen bei Imagemaps führen. Außerdem beeinträchtigen Bandbreitenprobleme oder beschädigte Bilder den Wert einer Imagemap.
Sie können also diese stabile, gut verstandene Technologie weiterhin verwenden und wissen, dass es derzeit effizientere Alternativen gibt in Mode mit Webdesignern.
