HTML <map> แบบบันทึก

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

กำหนดและการใช้งาน

<map> ต้องมี tag

<map> องค์ประกอบ ของมี attribute <img> องค์ประกอบ ของ ทางการใช้งาน attribute ที่เชื่อมโยงกัน，สร้างความเชื่อมโยงระหว่างแผนที่แสดงแบบแฟ้มและแผนที่。

<map> ประกอบด้วยบางองค์ประกอบ <area> องค์ประกอบ，กำหนดพื้นที่ที่สามารถคลิกได้ในแผนที่แสดงแบบแฟ้ม。

ดูเพิ่มเติม:

คู่มือ HTML DOM:เป้าหมาย Map

ตัวอย่าง

ตัวอย่าง 1

แผนที่แสดงแบบแฟ้มที่สามารถคลิกได้:

<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>

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

ตัวอย่าง 2

อีกแผนที่แสดงแบบแฟ้มที่สามารถคลิกได้:

<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>