พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน area Tag

ใน HTML5 แท็ก <area> ใช้ร่วมกับแท็ก <map> เพื่อกำหนดพื้นที่ที่เป็นลิงก์หรือมีการโต้ตอบในรูปภาพที่ใช้แท็ก <img> โดยพื้นฐานการใช้งานของ <area> คือการสร้างพื้นที่บนภาพที่สามารถคลิกหรือทำการโต้ตอบได้ เช่น การนำไปยังลิงก์ที่กำหนดหรือแสดงข้อมูลเพิ่มเติม แท็ก <area> จะกำหนดรูปร่างของพื้นที่โดยใช้แอตทริบิวต์ต่าง ๆ เช่น shape, coords, และ href

การใช้งานพื้นฐาน

HTML
<img src="example.jpg" alt="Example Image" usemap="#examplemap">

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" alt="Link 1" href="https://example1.com">
  <area shape="circle" coords="337,300,44" alt="Link 2" href="https://example2.com">
  <area shape="poly" coords="312,60,415,120,350,310,210,410" alt="Link 3" href="https://example3.com">
</map>

แอตทริบิวต์สำคัญของ <area>

  1. shape: กำหนดรูปร่างของพื้นที่บนภาพที่สามารถคลิกได้ มี 3 รูปแบบที่ใช้บ่อย:
    • rect (สี่เหลี่ยม)
    • circle (วงกลม)
    • poly (รูปหลายเหลี่ยม)
  2. coords: ระบุตำแหน่งของพื้นที่ตามรูปร่างที่เลือก โดยตำแหน่งจะใช้ค่าพิกัดของภาพ
    • ถ้า shape="rect" จะใช้รูปแบบ x1, y1, x2, y2 (มุมบนซ้าย และมุมล่างขวาของสี่เหลี่ยม)
    • ถ้า shape="circle" จะใช้รูปแบบ x, y, r (พิกัดจุดศูนย์กลางและรัศมีของวงกลม)
    • ถ้า shape="poly" จะใช้รูปแบบ x1, y1, x2, y2, ... (พิกัดของจุดทุกจุดในรูปหลายเหลี่ยม)
  3. href: ลิงก์ที่ต้องการให้ผู้ใช้ไปเมื่อคลิกที่พื้นที่นั้น
  4. alt: ข้อความที่แสดงเมื่อพื้นที่นั้นถูกอ่านโดยเครื่องมือช่วยเหลือ เช่น screen readers

ตัวอย่างเพิ่มเติม

สร้างลิงก์บนพื้นที่สี่เหลี่ยม

HTML
<area shape="rect" coords="50,50,150,150" href="https://example.com" alt="Go to Example">

สร้างลิงก์บนพื้นที่วงกลม

HTML
<area shape="circle" coords="200,200,50" href="https://circle-link.com" alt="Circle Link">

สร้างลิงก์บนพื้นที่รูปหลายเหลี่ยม

HTML
<area shape="poly" coords="50,50,100,100,150,50" href="https://poly-link.com" alt="Polygon Link">

พื้นที่ที่ไม่ใช่ลิงก์ แต่ใช้ประโยชน์อื่นได้ (เช่น การใช้งาน JavaScript)

HTML
<area shape="rect" coords="10,10,100,100" alt="Click Me" onclick="alert('You clicked the area!')">

การประยุกต์ใช้งาน

  • การนำไปใช้ในแผนที่: สามารถนำ <area> มาสร้างแผนที่ที่แต่ละจุดบนแผนที่สามารถคลิกได้เพื่อแสดงข้อมูลของพื้นที่นั้น
  • การสร้าง Interface สำหรับข้อมูลหลายจุด: ใช้สร้างภาพที่มีปฏิสัมพันธ์ได้ เช่น การอธิบายโครงสร้างผลิตภัณฑ์ หรือการออกแบบอินเทอร์เฟซแบบภาพที่แต่ละจุดมีฟังก์ชันแตกต่างกัน
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ