So erstellen Sie Imagemaps ohne einen Imagemap-Editor

In diesem Artikel wird erläutert, wie Sie Imagemaps mithilfe von HTML-Tags anstelle eines Imagemap-Editors erstellen. Die meisten Bildbearbeitungsprogramme zeigen Ihnen die Koordinaten Ihrer Maus, wenn Sie auf das Bild zeigen. Dies sind alle Daten, die Sie benötigen, um mit Imagemaps zu beginnen.

Erstellen einer Imagemap

Um eine Imagemap zu erstellen, wählen Sie zunächst ein Bild aus, das als Grundlage der Map dienen soll. Das Bild sollte "normale Größe" haben, dh 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 identifiziert:

Wenn Sie eine Imagemap erstellen, erstellen Sie einen Bereich, der auf dem Bild angeklickt werden kann, sodass die Koordinaten der Map mit der Höhe und Breite des ausgewählten Bildes übereinstimmen müssen. 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 kartieren möchten. Eine Karte kann aus einem oder mehreren definierten Bereichen auf dem Bild bestehen, die beim Anklicken einen neuen Hyperlink öffnen.

Für ein Rechteck, ordnen Sie nur die obere linke und die untere rechte Ecke zu. Alle Koordinaten sind als x, y (über, oben) aufgeführt. Also, für die obere linke Ecke 0,0 und die untere rechte Ecke 10,15 würden Sie eingeben 0,0,10,15. Sie fügen es dann in die Karte ein:

Für ein Polygon, du bildest 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 nur zwei Koordinaten, wie das Rechteck, aber für die zweite Koordinate geben Sie den Radius oder den Abstand vom Mittelpunkt des Kreises an. Für einen Kreis mit dem Mittelpunkt bei 122.122 und einem Radius von 5 würden Sie also 122.122,5 schreiben:

Alle Bereiche und Formen können in demselben Karten-Tag enthalten sein:

Überlegungen

Imagemaps waren in der Web 1.0-Ära von den 1990er Jahren bis in die frühen 2000er Jahre viel verbreiteter – Imagemaps bildeten oft die Grundlage für die Navigation einer Website. Ein Designer würde eine Art Bild erstellen, um Menüelemente anzuzeigen, und dann eine Karte festlegen.

Moderne Ansätze fördern ein responsives Design und verwenden Cascading Style Sheets, um die Platzierung von Bildern und Hyperlinks auf einer Seite zu steuern.

Obwohl das Map-Tag im HTML-Standard weiterhin unterstützt wird, kann die Verwendung von mobilen Geräten mit kleinen Formfaktoren zu unerwarteten Performance-Problemen bei Imagemaps führen. Außerdem machen Bandbreitenprobleme oder kaputte Bilder den Wert einer Imagemap strittig.

Sie können diese stabile, gut verstandene Technologie also weiterhin verwenden – im Wissen, dass es derzeit effizientere Alternativen gibt in Mode mit Webdesignern.