แท็ก <area> ใน HTML
แท็ก <area> ใน HTML ใช้สำหรับตั้งค่าพื้นที่ใน image map (แผนที่ภาพ)
แอตทริบิวท์ต่อไปนี้:
| แอตทริบิวท์ | ค่า | คำอธิบาย |
|---|---|---|
| alt | text | ระบุข้อความทางเลือกสำหรับพื้นที่ |
| coords | if shape = "rect" then coords = "left, top, right, bottom" if shape = "circ" then coords = "centerx, centery, radius" if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn" | ระบุพิกัดที่เหมาะสมกับแอตทริบิวท์ shape เพื่อกำหนดพื้นที่ของภาพสำหรับ image maps |
| download | filename | ระบุว่าเป้าหมายจะถูกดาวน์โหลดเมื่อผู้ใช้คลิกไฮเปอร์ลิงก์ |
| href | URL | ระบุ URL ของหน้าหรือชื่อแองคอร์ที่ลิงก์ไป |
| hreflang | language_code | ระบุภาษาของ URL เป้าหมาย |
| media | media query | ระบุสื่อ/อุปกรณ์ที่ 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 - URL เป้าหมายจะเปิดในหน้าต่างใหม่ _self - URL เป้าหมายจะเปิดในเฟรมเดียวกับที่คลิก _parent - URL เป้าหมายจะเปิดใน frameset พาเรนต์ _top - URL เป้าหมายจะเปิดในทั้ง body ของหน้าต่าง |
| type | mime_type | ระบุประเภท MIME ของ URL เป้าหมาย |
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การเรียนรู้</h2>
<p>เรียนรู้เทคโนโลยีเหล่านี้ได้อย่างง่ายดาย....</p>
<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>
ผลลัพธ์
