HTML <area> โซลด์

  • หน้าก่อนหน้า <applet>
  • หน้าต่อไป <article>

การใช้งานและการประกาศ

<area> แทร็กบ์แท็กที่กำหนดพื้นที่ของแผนที่ภาพ (แผนที่ภาพคือภาพที่มีโซนที่สามารถคลิกได้ หรือ แผนที่ตอบสนองฝั่งลูกค้า)

<area> อนุภาคเสริมเข้าไปใน แทร็กบ์แท็กภายใน

ข้อเตือน:<img> ใน คุณสมบัติ usemap และ <map> อนุภาค ของ คุณสมบัติ nameต่อเนื่องกัน สร้างการเชื่อมโยงระหว่างภาพและแผนที่

อ่านเพิ่มเติม:

คู่มืออ้างอิง HTML DOM:เป้าหมายของ Area

ตัวอย่าง

ตัวอย่าง 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>

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

คุณสมบัติ

คุณสมบัติ ค่า คำอธิบาย
alt ข้อความ กำหนดข้อความทางเลือกของพื้นที่ ถ้ามีค่า href ในลิงก์ จะเป็นความจำเป็น
coords ค่าตำแหน่ง กำหนดตำแหน่งพื้นที่
download ชื่อไฟล์ กำหนดที่จะดาวน์โหลดเมื่อผู้ใช้คลิกลิงก์
href URL กำหนดเป้าหมายของลิงก์พื้นที่
hreflang รหัสภาษา กำหนดภาษาของ URL ป้ายหมาย
media คำถามสื่อ กำหนดสื่อ/อุปกรณ์ที่จะปรับปรุง URL ป้ายหมาย
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 กำหนดข้อมูลอ้างอิงที่จะส่งไปพร้อมลิงก์
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 กำหนดความสัมพันธ์ระหว่างเอกสารปัจจุบันและ URL ป้ายหมาย
shape
  • default
  • rect
  • circle
  • poly
 กำหนดรูปร่างของพื้นที่
target
  • _blank
  • _parent
  • _self
  • _top
  • ชื่อโครงการ
 กำหนดที่จะเปิด URL ป้ายหมาย
type ชนิดสื่อ กำหนดชนิดสื่อของ URL ป้ายหมาย

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

<area> ตามแบบฟอร์ม คุณสมบัติโลกาลใน HTML。

คุณสมบัติเหตุการณ์

<area> ตามแบบฟอร์ม คุณสมบัติเหตุการณ์ใน HTML。

การตั้งค่า CSS โดยเริ่มต้น

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

area {
  display: none;
}

การสนับสนุนเครื่องนี้

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