Detaillierte Erklärung des HTML-Bereichs-Tags

Detaillierte Erklärung des HTML-Bereichs-Tags

Der <area>-Tag definiert einen Bereich in einer Imagemap (Hinweis: Eine Imagemap ist ein Bild mit anklickbaren Bereichen).

Das Bereichselement ist immer in einem <map>-Tag verschachtelt.

Hinweis: Das Usemap-Attribut im <img>-Tag wird mit dem Elementnamenattribut <map> verknüpft, um eine Verknüpfung zwischen dem Bild und der Karte herzustellen. Das Usemap-Attribut in <img> kann entweder auf das ID- oder das Name-Attribut in <map> verweisen (wird vom Browser festgelegt), daher müssen wir sowohl das ID- als auch das Name-Attribut zu <map> hinzufügen.

Eigenschaftswert:

href: Klicken Sie auf den Link, um zum Bereich zu springen. alt: Die Meldung, die angezeigt wird, wenn das Bild nicht normal angezeigt werden kann.

Form & Koordinaten:

1. Distanzform: (die Koordinaten des oberen linken Scheitelpunkts sind (x1, y1) und die Koordinaten des unteren rechten Scheitelpunkts sind (x2, y2))

<Bereichsform="Rechteck" Koordinaten="x1,y1,x2,y2" href=url>

2. Kreis: (Mittelpunktkoordinaten sind (X1, y1), Radius ist r)

<Bereichsform="Kreis" Koordinaten="x1,y1,r" href=url>

3. Polygon: (die Koordinaten jedes Scheitelpunkts sind (x1, y1), (x2, y2), (x3, y3)...)

 <Bereichsform="Poly" Koordinaten="x1,y1,x2,y2 ......" href=url>

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung des vom Editor eingeführten HTML-Bereichs-Tags. Ich hoffe, dass es für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste

>>:  Installieren Sie .NET 6.0 im CentOS-System mithilfe eines Cloud-Servers

Artikel empfehlen

So verwenden Sie Port 80 in Tomcat unter Linux

Anwendungsszenario In vielen Fällen installieren ...

Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit

docker-compose-monitor.yml Version: '2' N...

Docker löscht private Bibliotheksbilder vollständig

Werfen wir zunächst einen Blick auf die allgemein...

Kann Asynchronität in JavaScript „Await“ speichern?

Ich wusste vorher, dass man await verwenden muss,...

Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren

Inhaltsverzeichnis 1. Ersetzen Sie die Apply-Meth...

CSS-Lösung für mehrspaltiges Layout

1. Feste Breite + adaptiv Erwarteter Effekt: fest...

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Dieser Artikel erläutert anhand eines konkreten B...

Grundsätze und Nutzungsdetails für MySQL 8.0-Benutzer- und Rollenverwaltung

Dieser Artikel beschreibt die Benutzer- und Rolle...

HTML-Kommentare Symbole zum Markieren von Textkommentaren in HTML

HTML-Kommentare: Wir müssen häufig einige HTML-Ko...

Native JS-Kapselung, nahtlose Karussellfunktion

Natives js-gekapseltes nahtloses Karussell-Plug-I...

Umfassendes Verständnis des MySQL-Protokolls für langsame Abfragen

Inhaltsverzeichnis Was ist das Protokoll langsame...

Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac

1. Werkzeuge Wir benötigen jetzt zwei Tools: MySQ...