Inhaltsverzeichnis
Definition und Verwendung
Hinweise:" >Tipps und Hinweise:
Unterschiede zwischen HTML und XHTML
HTML-DOM-Bereichsobjekt
Bereich Objekt
Eigenschaften des Flächenobjekts
Standardeigenschaften
Heim Web-Frontend HTML-Tutorial Verwendung von HTML-Map-Tags

Verwendung von HTML-Map-Tags

Jun 27, 2017 pm 01:37 PM
html 使用 标签

Ich habe heute eine Marketingkampagne auf JD.com gesehen. Die schwebende Navigation auf der linken Seite wurde mit dem Karten-Tag in HTML geschrieben, daher dieser Artikel.

Die im Bild oben gezeigten Großgeräte

Verwendung von HTML-Map-Tags

<p>
	<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png" class="lazy" von html-map-tags alt="Verwendung von HTML-Map-Tags" >
	<map>
		<area>
	</map>
</p>
Nach dem Login kopieren

Übrigens habe ich einige relevante Informationen extrahiert:

HTML -Tag

Bildkarte mit anklickbarem Bereich;

Alle gängigen Browser unterstützen das -Tag.

Definition und Verwendung

Definieren Sie eine Client-Image-Map. Image-Map bezieht sich auf ein Bild mit anklickbaren Bereichen.

Tipps und Hinweise:

Hinweis: Bereichselemente werden immer in Kartenelementen verschachtelt. Das Flächenelement definiert einen Bereich in der Bildkarte.

Hinweis: Das usemap -Attribut in Verwendung von HTML-Map-Tags kann auf das id- oder name-Attribut in verweisen Daher sollten wir sowohl die ID- als auch die Namensattribute zur hinzufügen.


Unterschiede zwischen HTML und XHTML

In HTML hat kein schließendes Tag.

In XHTML muss ordnungsgemäß geschlossen werden.

Bereich 属性

Koordinaten Hintergrundfarbe 定义可点击区域(对鼠标敏感的区域)的坐标.
href URL
属性 描述
coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。
href URL 定义此区域的目标 URL。
nohref nohref 从图像映射排除某个区域。
shape
  • default

  • rect

  • circ

  • poly

定义区域的形状。
target
  • _blank

  • _parent

  • _self

  • _top

规定在何处打开 href 属性指
Die URL Ihres Browsers anzeigen
nohref nohref Form
  • Standard

  • rect

  • circ

  • poly

td>
Sie können die Hintergrundfarbe Ihres Computers ändern.
Ziel
  • _blank

  • _parent

  • _self

  • _top

td>

HTML-DOM-Bereichsobjekt


Bereich Objekt

Area-Objekt stellt einen Bereich der Bildzuordnung dar (Bildzuordnung bezieht sich auf ein Bild mit einem anklickbaren Bereich)

In einem HTML-Dokument wird jedes Mal, wenn das Tag erscheint, Erstellen Sie ein Area-Objekt.


Eigenschaften des Flächenobjekts

Eigenschaft Beschreibung
accessKey Einstellungen Oder geben Sie die Tastenkombinationen für den Zugriff auf einen Bereich zurück.
alt Legt den Alternativtext fest oder gibt ihn zurück, wenn der Browser einen bestimmten Bereich nicht anzeigen kann.
Koordinaten Legen Sie die Koordinaten des anklickbaren Bereichs in der Bildkarte fest oder geben Sie sie zurück.
Hash Legt den Ankerteil einer URL in einer Zone fest oder gibt ihn zurück.
Host Legt den Hostnamen und den Port einer URL in einer Zone fest oder gibt sie zurück.
href Legen Sie die URL des Links in der Imagemap fest oder geben Sie sie zurück.
id Legen Sie die ID eines bestimmten Bereichs fest oder geben Sie sie zurück.
noHref Legt fest oder gibt zurück, ob eine Region aktiv oder inaktiv sein soll.
Pfadname Legt den Pfadnamen einer URL in einer Zone fest oder gibt ihn zurück.
Protokoll Legt das Protokoll für URLs in einer Zone fest oder gibt es zurück.
Suche Legt den Abfrage-String--Teil einer URL in einer Region fest oder gibt ihn zurück.
Form Legen Sie die Form eines Bereichs in der Bildkarte fest oder geben Sie sie zurück.
tabIndex Legen Sie die Steuerreihenfolge der Tabulatortasten für einen bestimmten Bereich fest oder geben Sie sie zurück.
Ziel Legt fest oder gibt zurück, wo die Link-URL in der Zone geöffnet werden soll.


Standardeigenschaften

Attribute Beschreibung
属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title。
classNameLegt das Klassenattribut des Elements fest oder gibt es zurück. dirLegen Sie die Richtung des Textes fest oder geben Sie sie zurück. langLegen Sie den Sprachcode des Elements fest oder geben Sie ihn zurück. TitelLegen Sie den Titel des Elements fest oder geben Sie ihn zurück.

Das obige ist der detaillierte Inhalt vonVerwendung von HTML-Map-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles