HTML <map> 标籤

  • หน้าก่อนหน้า <main>
  • หน้าต่อไป <mark>

Definition and Usage

<map> tag para sa pagdefinir ng image map. Ang image map (isang uri ng navigational map) ay isang imahe na may klikable na area.

<map> ang element ay kailangang may name Attribute，ang attribute na kasama sa <img> Element ng usemap Attribute kaugnay na, na nagtatag ng relasyon sa pagitan ng imahe at map.

<map> Ang element ay naglalaman ng ilang <area> Element，tumutukoy sa klikable na area ng image map.

Mga iba pang babasa:

HTML DOM Reference Manual:Map Object

Sample

Halimbawa 1

Ang imaheng may klikable na area sa mapa:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

ลองด้วยตัวเอง

Halimbawa 2

Ang isa pang imaheng may klikable na area sa mapa:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

ลองด้วยตัวเอง

คุณสมบัติ

คุณสมบัติ ค่า คำอธิบาย
name ชื่อแผนที่ จำเป็น กำหนดชื่อแผนที่ภาพ

คุณสมบัติโลก

<map> แท็กตัวอย่างยังสนับสนุน คุณสมบัติโลกแบบ HTML。

คุณสมบัติเหตุ

<map> แท็กตัวอย่างยังสนับสนุน คุณสมบัติเหตุใน HTML。

การตั้งค่า CSS ปริยาย

โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าปริยายตามต่อไปนี้ <map> องค์ประกอบ：

map {
  display: inline;
}

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน
  • หน้าก่อนหน้า <main>
  • หน้าต่อไป <mark>