ความหมายของค่า coords ของ HTML <area>

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

coords แอตทริบิวต กำหนดตำแหน่งของพื้นที่ในแผนที่ภาพทางกลับ

coords แอตทริบิวต แอตทริบิวต shape ใช้ร่วมกันเพื่อกำหนดขนาด, รูปร่าง และตำแหน่งของพื้นที่

คำแนะนำ:ตำแหน่งมุมบนฝั่งซ้ายของพื้นที่คือ 0,0

สัญญาณเตือน:ถ้าค่าของ coords ในแท็ก area และพื้นที่อื่นเกิดการบุลคลอบกัน แท็ก area ที่ปรากฏขึ้นแรกจะถูกใช้งานก่อน โปรแกรมน่านซอฟต์แวร์จะละเลยค่าของตำแหน่งที่อยู่นอกชายของภาพ

ตัวอย่าง

ใช้ coords มีความหมายว่ากำหนดตำแหน่งของพื้นที่ในแผนที่ภาพทางกลับ

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

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

ระบุ

<area coords="value">

ค่าของแอตทริบิวต

ค่า การอธิบาย
x1,y1,x2,y2 กำหนดตำแหน่งของมุมบนฝั่งซ้ายและมุมล่างฝั่งขวาของสี่เหลี่ยมผืนผ้า (shape="rect")
x,y,radius กำหนดตำแหน่งของจุดศูนย์กลางและเส้นรอบวง (shape="circle")
x1,y1,x2,y2,...,xn,yn

กำหนดตำแหน่งของขอบของรูปสี่เหลี่ยมผืนผ้า

ถ้าคู่ตัวเลขแรกและคู่ตัวเลขสุดท้ายไม่เหมือนกัน โปรแกรมน่านซอฟต์แวร์จะเพิ่มคู่ตัวเลขสุดท้ายเพื่อปิดรูปสี่เหลี่ยมผืนผ้า (shape="poly")

การอธิบายละเอียด:

coords ของแท็ก <area> จัดแสดงตำแหน่งของพื้นที่ที่มีการตอบสนองต่อปุ่มเมาส์ในการแผนที่ภาพทางกลับ (ค่าของตัวเลขและความหมายของเลขนี้ขึ้นอยู่กับรูปร่างของพื้นที่ที่กำหนดโดย shape ของแท็ก) สามารถกำหนดพื้นที่ของลิงก์ในแผนที่ภาพทางกลับเป็นสี่เหลี่ยมผืนผ้า, วงกลม, หรือรูปสี่เหลี่ยมผืนผ้าต่างๆ

ต่อไปนี้เป็นรายการค่าที่เหมาะสมสำหรับแต่ละรูปร่าง

วงกลม: shape="circle", coords="x,y,z"

ที่นี้ x และ y จัดแสดงตำแหน่งของจุดศูนย์กลางของวง ("0,0" คือตำแหน่งของจุดบนฝั่งซ้ายของภาพ), r คือเส้นรอบวงด้วยหน่วยพิกเซล

รูปสี่เหลี่ยมผืนผ้า: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

แต่ละคู่ตัวเลข "x,y" จัดแสดงจุดหนึ่งของรูปสี่เหลี่ยมผืนผ้า ("0,0" คือตำแหน่งของจุดบนฝั่งซ้ายของภาพ) มีความหมายว่าจัดแสดงจุดหนึ่งของรูปสี่เหลี่ยมผืนผ้า; รูปสี่เหลี่ยมผืนผ้าที่มีระยะยาวมากต้องการจุดหน้าที่มากกว่านี้

สี่เหลี่ยมผืนผ้าจะถูกปิดเองโดยอัตโนมัติ ดังนั้นไม่จำเป็นที่จะกำหนดพิกัดจุดแรกอีกครั้งในท้ายของรายการเพื่อปิดพื้นที่ทั้งหมด

สี่เหลี่ยมผืนผ้า: shape="rectangle" ความเห็นด้วย="x1,y1,x2,y2"

ตัวเริ่มต้นเป็นตัวกำหนดพิกัดของจุดหนึ่งของสี่เหลี่ยมผืนผ้า หรือพิกัดของจุดหนึ่งของสามเหลี่ยมของมุมของสี่เหลี่ยมผืนผ้า "0,0" คือพิกัดของมุมบนซ้ายของภาพ โปรดระวังว่า การกำหนดสี่เหลี่ยมผืนผ้านั้นเป็นวิธีที่เรียบง่ายของการกำหนดพื้นที่ที่มีสี่จุดของมุม

ตัวอย่าง XHTML ด้านล่างนี้ ในช่วงล่างของภาพ 100x100 พิกเซลที่ด้านขวาของภาพ สี่เหลี่ยมผืนผ้าที่กำหนดพื้นที่ที่มีสมองเสมอภาคต่อหมุดหมุน และกำหนดพื้นที่เป็นวงกลมที่ตั้งอยู่ในกลางภาพ

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน