คุณสมบัติ usemap ของ HTML <img>

HTML <img> แบบ

การกำหนดและการใช้งาน

usemap คุณสมบัตินี้จะกำหนดภาพเป็นแผนภาพลูกของโปรแกรมลูกค้า

การแผนภาพที่มีพื้นที่ที่สามารถคลิกได้

usemap คุณสมบัติ องค์ประกอบ ที่มีความเกี่ยวข้องกับตัวแปล name หรือ id ของ

ข้อเนื่องไม่สามารถใช้ usemap คุณสมบัติ。

อ่านเพิ่มเติม：รายละเอียด usemap ครบถ้วน

ตัวอย่าง

แบบแฟ้มภาพที่มีพื้นที่ที่สามารถคลิกได้

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

ลองทดลองเอง

ศัพท์

<img usemap="#mapname">

ค่ารายละเอียด

ค่า รายละเอียด
#mapname หลังจากเครื่องหมายหมายเลข ("#") และชื่อแบบฉบับ <map> ที่ต้องการใช้

อ่านเพิ่มเติม：รายละเอียด usemap ครบถ้วน

usemap รายละเอียดนี้ให้กับระบบแบบฉบับ "กลาง" ของภาพแสดงภาพ ซึ่งปราศจากการจัดการของเซิร์ฟเวอร์ด้านคอนเทนต์ของเมาส์ และปัญหาลดช้าของเครือข่าย ผ่านการใช้แทร็ก <map> และ <area> แบบพิเศษ ผู้สร้าง HTML สามารถให้ความหมายให้กับตำแหน่งของลิงก์ที่มีความเกี่ยวข้องกับภาพแสดงภาพ usemap รวมถึง URL ของลิงก์นั้นเอง usemap มีค่าคือ URL ที่มีอยู่ของ <map> ซึ่งมีความเกี่ยวข้องกับภาพแสดงภาพ ซึ่งบราวเซอร์บนคอมพิวเตอร์ของผู้ใช้จะแปลงตำแหน่งของเมาส์ที่กดบนภาพแสดงภาพเป็นพฤติกรรมเฉพาะ รวมถึงการโหลดและแสดงเอกสารอื่นๆ

เราจะแสดงตัวอย่างเพื่อชี้แจง รหัสแบบต้นฉบับด้านล่างนี้จะแปลงภาพตัวเล็กขนาด 100x100 พิกเซลของ map.gif ให้เป็น 4 ส่วนที่ต่อเนื่องกัน และเมื่อผู้ใช้คลิกบนหนึ่งในส่วนนั้น จะถูกโยนไปยังเอกสารที่ต่างๆ โปรดจำแนกความสำคัญว่า ในแทร็ก <img> นี้ เราได้เรียกใช้ฟังก์ชันการจัดการ image map ของ ismap อย่างมีประสิทธิภาพ ซึ่งทำให้ผู้ใช้บราวเซอร์ที่ไม่มีฟังก์ชัน usemap สามารถจัดการ image map ผ่านทางเครื่องยนต์ของเซิร์ฟเวอร์ต่างๆ

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

ความแตกต่างในการใช้ ismap และ usemap

แผนที่เป็นตัวอย่างที่ใช้ ismap และ usemap อย่างดี ตัวอย่างเช่น ในการเข้าถึงเว็บไซต์ของบริษัทใหญ่ทั่วประเทศ ผู้ใช้อาจคลิกเมืองที่พวกเขาอาศัยอยู่บนแผนที่เพื่อขอรับที่อยู่และหมายเลขโทรศัพท์ของร้านค้าใกล้เคียง

ข้อดีของการใช้ usemap ในการจัดการแผนที่เนื้อหา คือมันไม่ต้องการเซิร์ฟเวอร์หรือซอฟต์แวร์เซิร์ฟเวอร์พิเศษ ต่างจากที่มี ismap มันสามารถใช้ในสภาพที่ไม่มีเว็บ (ไม่มีเครือข่าย) ตัวอย่างเช่นใช้ในไฟล์ท้องถิ่นหรือ CD-ROM

การสนับสนุนโปรแกรมบราวเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

HTML <img> แบบ