Heim > Web-Frontend > Front-End-Fragen und Antworten > So verwenden Sie das HTML-Map-Tag

So verwenden Sie das HTML-Map-Tag

青灯夜游
Freigeben: 2019-05-27 13:15:12
Original
4170 Leute haben es durchsucht

HTML-Map-Tag wird für die clientseitige Bildzuordnung verwendet. Eine Imagemap ist ein Bild mit anklickbaren Bereichen. Da das Attribut usemap in So verwenden Sie das HTML-Map-Tag auf das Attribut id oder name in verweisen kann, sollten wir sowohl das Attribut id als auch den Namen zu hinzufügen.

So verwenden Sie das HTML-Map-Tag

Wie verwende ich das HTML-Map-Tag?

Funktion: Definieren Sie eine Client-Image-Zuordnung.

Erklärung: Image-Map bezieht sich auf ein Bild mit einem anklickbaren Bereich.

Hinweis: Flächenelemente werden immer in Kartenelementen verschachtelt. Das Flächenelement definiert einen Bereich in der Bildkarte. Das usemap-Attribut in So verwenden Sie das HTML-Map-Tag kann auf das id- oder name-Attribut in verweisen (je nach Browser), daher sollten wir sowohl das id- als auch das name-Attribut zu hinzufügen.

HTML-Karten-Tag-Beispiel

<!DOCTYPE html>
<html>
<body>

<img
src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>
Nach dem Login kopieren

Ausgabe:

So verwenden Sie das HTML-Map-Tag

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das HTML-Map-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage