แผนที่รูปภาพ HTML
ด้วยแผนที่รูปภาพ HTML คุณสามารถสร้างพื้นที่ที่สามารถคลิกได้บนรูปภาพ
แผนที่ภาพ
แท็ก HTML <map>กำหนดแผนที่รูปภาพ แผนผังรูปภาพคือรูปภาพที่มีพื้นที่ที่สามารถคลิกได้ พื้นที่ถูกกำหนดด้วยแท็กตั้งแต่หนึ่ง<area>แท็ก ขึ้นไป
ลองคลิกที่คอมพิวเตอร์ โทรศัพท์ หรือถ้วยกาแฟตามภาพด้านล่าง:
ตัวอย่าง
นี่คือซอร์สโค้ด HTML สำหรับแผนผังรูปภาพด้านบน:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
มันทำงานอย่างไร?
แนวคิดเบื้องหลังการแมปภาพคือ คุณควรสามารถดำเนินการต่างๆ ได้ ขึ้นอยู่กับตำแหน่งในภาพที่คุณคลิก
ในการสร้างแผนผังรูปภาพ คุณต้องมีรูปภาพ และโค้ด HTML บางส่วนที่อธิบายพื้นที่ที่สามารถคลิกได้
รูปภาพ
รูปภาพถูกแทรกโดยใช้<img>แท็ก ความแตกต่างเพียงอย่างเดียวจากภาพอื่นๆ คือ คุณต้องเพิ่มusemapแอตทริบิวต์:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
ค่าusemapเริ่มต้นด้วยแท็กแฮช
#ตามด้วยชื่อของแผนผังรูปภาพ และใช้เพื่อสร้างความสัมพันธ์ระหว่างรูปภาพกับแผนผังรูปภาพ
เคล็ดลับ:คุณสามารถใช้รูปภาพใดก็ได้เป็นแผนผังรูปภาพ!
สร้างแผนที่รูปภาพ
จากนั้นเพิ่ม<map>องค์ประกอบ
องค์ประกอบ<map>นี้ใช้ในการสร้างแผนที่รูปภาพ และเชื่อมโยงกับรูปภาพโดยใช้name
แอตทริบิวต์ที่จำเป็น:
<map name="workmap">
แอตทริบิวต์nameต้องมีค่าเดียวกับ
แอตทริบิวต์<img>ของusemap
พื้นที่
จากนั้น เพิ่มพื้นที่ที่สามารถคลิกได้
พื้นที่ที่คลิกได้ถูกกำหนดโดยใช้<area>องค์ประกอบ
รูปร่าง
คุณต้องกำหนดรูปร่างของพื้นที่ที่สามารถคลิกได้ และคุณสามารถเลือกค่าใดค่าหนึ่งเหล่านี้ได้:
rect- กำหนดพื้นที่สี่เหลี่ยมcircle- กำหนดพื้นที่วงกลมpoly- กำหนดพื้นที่รูปหลายเหลี่ยมdefault- กำหนดภูมิภาคทั้งหมด
คุณต้องกำหนดพิกัดเพื่อให้สามารถวางพื้นที่ที่สามารถคลิกได้บนรูปภาพ
รูปร่าง = "ตรง"
พิกัดสำหรับshape="rect"มาเป็นคู่ อันหนึ่งสำหรับแกน x และอีกอันสำหรับแกน y
ดังนั้น พิกัด34,44จะอยู่ที่ 34 พิกเซลจากระยะขอบด้านซ้ายและ 44 พิกเซลจากด้านบน:
พิกัด270,350จะอยู่ที่ 270 พิกเซลจากระยะขอบด้านซ้ายและ 350 พิกเซลจากด้านบน:
ตอนนี้ เรามีข้อมูลเพียงพอที่จะสร้างพื้นที่สี่เหลี่ยมที่สามารถคลิกได้:
ตัวอย่าง
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
นี่คือพื้นที่ที่สามารถคลิกได้และจะส่งผู้ใช้ไปยังหน้า "computer.htm":
รูปร่าง = "วงกลม"
ในการเพิ่มพื้นที่วงกลม ก่อนอื่นให้หาพิกัดของจุดศูนย์กลางของวงกลม:
337,300
จากนั้นระบุรัศมีของวงกลม:
44 พิกเซล
ตอนนี้คุณมีข้อมูลเพียงพอที่จะสร้างพื้นที่วงกลมที่คลิกได้:
ตัวอย่าง
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
นี่คือพื้นที่ที่สามารถคลิกได้และจะส่งผู้ใช้ไปยังหน้า "coffee.htm":
รูปร่าง = "โพลี"
ประกอบด้วย จุดshape="poly"พิกัดหลายจุด ซึ่งสร้างรูปร่างที่มีเส้นตรง (รูปหลายเหลี่ยม)
สามารถใช้เพื่อสร้างรูปร่างใดก็ได้
เหมือนครัวซองต์รูปร่าง!
เราจะทำให้ครัวซองต์ในภาพด้านล่างเป็นลิงค์ที่สามารถคลิกได้อย่างไร?
เราต้องหาพิกัด x และ y ของขอบครัวซองต์ทั้งหมด:
พิกัดมาเป็นคู่ อันหนึ่งสำหรับแกน x และอีกอันสำหรับแกน y:
ตัวอย่าง
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
นี่คือพื้นที่ที่สามารถคลิกได้และจะส่งผู้ใช้ไปยังหน้า "croissant.htm":
แผนผังรูปภาพและ JavaScript
พื้นที่ที่คลิกได้ยังสามารถทริกเกอร์ฟังก์ชัน JavaScript
เพิ่มclickเหตุการณ์ให้กับ<area>องค์ประกอบเพื่อเรียกใช้ฟังก์ชัน JavaScript:
ตัวอย่าง
ที่นี่ เราใช้แอตทริบิวต์ onclick เพื่อเรียกใช้ฟังก์ชัน JavaScript เมื่อพื้นที่ถูกคลิก:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
สรุปบท
- ใช้องค์ประกอบ HTML
<map>เพื่อกำหนดแผนที่รูปภาพ - ใช้องค์ประกอบ HTML
<area>เพื่อกำหนดพื้นที่ที่สามารถคลิกได้ในแผนผังรูปภาพ usemapใช้ แอตทริบิวต์ HTML ของ<img>องค์ประกอบเพื่อชี้ไปที่แผนที่รูปภาพ
แท็กรูปภาพ HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา