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

Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests

Inhaltsverzeichnis rahmen Erstklassiges Fehlerrep...

JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen

Um die Fähigkeit zum Schreiben von nativem JavaSc...

Vue3.x verwendet mitt.js für die Komponentenkommunikation

Inhaltsverzeichnis Schnellstart Anwendung Grundpr...

Details zu gängigen Javascript-Funktionen höherer Ordnung

Inhaltsverzeichnis 1. Gemeinsame Funktionen höher...

Lösung für den Konflikt zwischen Nginx und Backend-Port

Frage: Bei der Entwicklung des Alice-Verwaltungss...

Layim in Javascript, um Freunde und Gruppen zu finden

Derzeit haben die Verantwortlichen von Layui die ...

HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite

Div-Lösung bei Konflikten zwischen relativer und ...

So legen Sie die Umgebungsvariable PATH im Linux-System fest (3 Methoden)

1. In Windows-Systemen erfordern viele Softwarein...

So realisieren Sie die vertikale Anordnung von Text mit CSS3

In einem aktuellen Projekt wollte ich Text vertik...

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Inhaltsverzeichnis Kurze Analyse des MySQL Master...