ความหมายของค่า 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 |
| การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน |
