home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ type ของ <area>: ระบุ MIME Type ของลิงก์เป้าหมาย

แอตทริบิวต์ type ของ <area> คืออะไร?

แอตทริบิวต์ type ของแท็ก <area> ใช้สำหรับ ระบุ MIME Type (Media Type) ของเอกสารที่ลิงก์ไป** ช่วยให้เบราวเซอร์ทราบประเภทไฟล์ก่อนโหลด (Advisory בלבד ไม่บังคับ)

ไวยากรณ์ (Syntax)

<area type="media_type">

MIME Types ที่พบบ่อย

ประเภทตัวอย่าง
Imagesimage/png, image/jpeg, image/gif, image/webp, image/svg+xml
Documentsapplication/pdf, text/html, text/plain, application/msword
Audioaudio/mpeg, audio/ogg, audio/wav
Videovideo/mp4, video/webm, video/ogg
Archivesapplication/zip, application/x-rar-compressed

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>การเรียนรู้</h2>
  <img src="/images/usemap.gif" alt="usemap" 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/images/test.png" type="image/png" />
    <area shape="circle" coords="73,168,32" 
          alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
  </map>
</body>
</html>

ผลลัพธ์

พื้นที่ "HTML Tutorial" ระบุ type="image/png" บอกเบราวเซอร์ว่าลิงก์นี้ไปยังไฟล์ PNG เมื่อคลิก เบราวเซอร์อาจแสดงรูปภาพโดยตรงแทนการดาวน์โหลด

จุดสำคัญ

  • เป็น **Advisory (คำแนะนำ)** เบราวเซอร์ไม่บังคับต้องปฏิบัติ
  • ช่วย Browser/OS เลือก Application เปิดไฟล์ที่เหมาะสม
  • ใช้ร่วมกับ download attribute เพื่อบอกชื่อไฟล์และประเภท
  • ไม่ใช่การ Validate ไฟล์จริง ไฟล์จริงอาจเป็นประเภทอื่นก็ได้

แอตทริบิวต์ที่เกี่ยวข้องของ <area>

  • href - URL เป้าหมาย
  • target - เป้าหมายการเปิด (_blank, _self, ฯลฯ)
  • rel - ความสัมพันธ์ (nofollow, alternate, ฯลฯ)
  • download - บังคับดาวน์โหลดพร้อมตั้งชื่อไฟล์
  • hreflang - ภาษาของเอกสารปลายทาง