ใช้แท็ก <area> เพื่อกำหนดพื้นที่ในแผนที่รูปภาพ (image map) ใน HTML ใช้ร่วมกับ <map> และ <img usemap>
แอตทริบิวต์ของ <area>
| แอตทริบิวต์ | ค่า | คำอธิบาย |
|---|---|---|
| alt | Text | ระบุข้อความทางเลือกสำหรับพื้นที่ |
| coords | rect: left,top,right,bottom circ: centerx,centery,radius poly: x1,y1,x2,y2...xn,yn |
ระบุพิกัดตาม shape เพื่อกำหนดพื้นที่ |
| download | filename | ระบุให้ดาวน์โหลดเมื่อคลิกลิงก์ |
| href | URL | ระบุ URL ของหน้าหรือ anchor ปลายทาง |
| hreflang | language_code | ระบุภาษาของ URL ปลายทาง |
| media | media query | ระบุ media/device ที่ URL ปลายทางเหมาะสม |
| nohref | true/false | ยกเว้นพื้นที่จาก image map |
| rel | alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag | ระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันและ URL ปลายทาง |
| shape | rect/rectangle, circ/circle, poly/polygon | ระบุรูปร่างของ image map |
| target | _blank, _parent, _self, _top | ที่เปิด URL: _blank=หน้าต่างใหม่, _self=เฟรมเดียวกัน, _parent=เฟรมพาเรนต์, _top=เต็มหน้าต่าง |
| type | mime_type | ระบุ MIME type ของ URL ปลายทาง |
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแท็ก <area>:
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src="/images/usemap.gif" alt="usemap" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" />
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
<area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
</map>
</body>
</html>
