Was man wissen sollte
• Verwenden Sie ein Bild in normaler Größe, das der Browser nicht neu skaliert. Außerdem benötigen Sie einen Bildeditor und einen HTML- oder Texteditor.
• Fügen Sie beim Einfügen des Bildes ein zusätzliches Attribut hinzu, um die Koordinaten der Karte zu identifizieren.
• Zum Beispiel:
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. Das sind alle Daten, die Sie benötigen, um mit Imagemaps zu beginnen.
Imagemap erstellen
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, das heißt, Sie sollten kein Bild verwenden, das so groß ist, dass der Browser es skaliert.
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, daher müssen die Koordinaten der Karte mit der Höhe und Breite des ausgewählten Bildes übereinstimmen. Karten unterstützen drei verschiedene Arten von Formen:
- rect-ein Rechteck oder eine vierseitige Figur
- Poly-a-Polygon oder 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 mappen Sie nur die obere linke und untere rechte Ecke. Alle Koordinaten sind als x, y (over, up) aufgeführt. Für die obere linke Ecke 0, 0 und die untere rechte Ecke 10, 15 würden Sie also 0, 0, 10, 15 eingeben. Anschließend nehmen Sie es in die Karte auf:
Bei einem Polygon ordnen Sie jede x- und y-Koordinate separat zu. Der Webbrowser verbindet automatisch den letzten Koordinatensatz mit dem ersten; alles innerhalb dieser Koordinaten ist Teil der Karte.
Kreisformen benötigen nur zwei Koordinaten, wie das Rechteck, aber für die zweite Koordinate geben Sie den Radius oder den Abstand vom Kreismittelpunkt an. Für einen Kreis mit 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 enth alten sein:
Überlegungen
Image Maps waren in der Web 1.0-Ära von den 1990er bis in die frühen 2000er Jahre viel häufiger – Image Maps bildeten oft die Grundlage für die Navigation einer Website. Ein Designer würde eine Art Bild erstellen, um Menüpunkte anzuzeigen, und dann eine Karte erstellen.
Moderne Ansätze fördern 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 Mobilgeräten mit kleinen Formfaktoren zu unerwarteten Performance-Problemen mit Imagemaps führen. Außerdem machen Bandbreitenprobleme oder kaputte Bilder den Wert einer Imagemap zunichte.
Sie können diese stabile, gut verstandene Technologie also weiterhin verwenden, da Sie wissen, dass es effizientere Alternativen gibt, die derzeit bei Webdesignern im Trend liegen.
