img usemap Attribut China Karte Link

HTML-img-Tag: definiert ein Bild, das in eine Webseite eingefügt werden soll. Es hat auch ein interessantes Usemap-Attribut.
Schauen Sie sich die Homepage von 51ditu an, dort ist eine Karte mit einer Karte von China in der Mitte. Klicken Sie mit der rechten Maustaste und laden Sie es herunter, um zu sehen, dass es nur ein gewöhnliches Bild ist.
Aber wenn man auf die Provinzen auf der Karte klickt, können unterschiedliche Ereignisse ausgelöst werden (oder unterschiedliche Links geöffnet werden), was sehr interessant ist. Es stellt sich heraus, dass das Usemap-Attribut verwendet wird.
Natürlich muss ein Map-Tag definiert werden. Der gesamte Code lautet wie folgt:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern

Informationen zur Bedeutung mehrerer Attribute des Bereichs-Tags im Karten-Tag finden Sie unter: http://www.w3school.com.cn/tags/tag_area.asp

Hier beachten wir noch das Shape-Attribut der Fläche. Zur Auswahl stehen Rechteck, Kreis und Polygon. Achten Sie besonders auf das Koordinatenattribut, das in Verbindung mit der Form verwendet werden muss. Die Koordinaten der oberen linken Ecke des Bildes sind „0,0“.

<<: Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann

>>: So entwerfen und optimieren Sie MySQL-Indizes

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

Artikel

jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren

Artikel

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

img usemap Attribut China Karte Link

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

So konfigurieren Sie WordPress mit Nginx

Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Spezifische Verwendung von GNU Parallel

Reines CSS zur Realisierung der Platzhalteranimation und Eingabeüberprüfung für Eingabefelder

Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien

Lösung für das Problem, dass der Image-Name nach dem Laden des Dockers keiner ist

Natives JS zum Erzielen eines Puzzle-Effekts

Artikel empfehlen

CentOS 7.x-Bereitstellung von Master- und Slave-DNS-Servern

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Ideen zum Erstellen von Welleneffekten mit CSS

Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by

Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind

Auszeichnungssprache - Phrasenelemente

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp

Detailliertes Tutorial zum Erstellen eines Gitlab-Servers auf CentOS8.1

Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg

Eine kurze Analyse von SQL-Beispielen zum Auffinden nicht festgeschriebener Transaktionen in MySQL

Vue.js implementiert das Neun-Raster-Bildanzeigemodul

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS