พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน map Tag

ใน HTML5, <map> เป็นแท็กที่ใช้ในการสร้างแผนที่ภาพ (image map) ซึ่งเป็นวิธีการทำให้บางส่วนของรูปภาพเป็นพื้นที่คลิกได้ โดยกำหนดพิกัดบนรูปภาพเพื่อสร้างจุดเชื่อมโยงไปยังลิงก์หรือการกระทำต่าง ๆ

แท็ก <map> จะทำงานร่วมกับแท็ก <area> ซึ่งใช้กำหนดพื้นที่คลิกได้บนภาพ โดยรูปภาพที่จะใช้กับ <map> ต้องมีแอตทริบิวต์ usemap ที่อ้างถึงชื่อของแผนที่ภาพ

โครงสร้างพื้นฐานของ <map> และ <area>

HTML
<img src="image.jpg" alt="Example Image" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" alt="Link 1" href="https://example.com/link1">
  <area shape="circle" coords="337,300,44" alt="Link 2" href="https://example.com/link2">
  <area shape="poly" coords="124,58,180,67,192,83,143,91" alt="Link 3" href="https://example.com/link3">
</map>
  • <img> มีแอตทริบิวต์ usemap เพื่ออ้างถึงแผนที่ภาพที่ชื่อว่า imagemap
  • <map> เป็นคอนเทนเนอร์ของ <area> ซึ่งจะกำหนดพื้นที่คลิกบนภาพ
  • <area> จะใช้แอตทริบิวต์ shape เพื่อกำหนดรูปทรงของพื้นที่ และ coords จะระบุตำแหน่งพิกัดในภาพ

อธิบายการใช้งานแท็ก <area>

shape="rect" ใช้กำหนดพื้นที่เป็นรูปสี่เหลี่ยม โดย coords จะเป็นพิกัด x และ y ของมุมซ้ายบนและมุมขวาล่างของพื้นที่

HTML
<area shape="rect" coords="34,44,270,350" alt="Link 1" href="https://example.com/link1">

shape="circle" ใช้กำหนดพื้นที่เป็นรูปวงกลม โดย coords จะเป็นพิกัด x, y ของจุดศูนย์กลาง และรัศมีของวงกลม

HTML
<area shape="circle" coords="337,300,44" alt="Link 2" href="https://example.com/link2">

shape="poly" ใช้กำหนดพื้นที่เป็นรูปหลายเหลี่ยม โดย coords จะระบุพิกัดของแต่ละจุดตามลำดับ

HTML
<area shape="poly" coords="124,58,180,67,192,83,143,91" alt="Link 3" href="https://example.com/link3">

shape="default" ใช้คลุมพื้นที่รูปภาพทั้งหมด เป็นพื้นที่คลิกที่ไม่ได้กำหนดรูปทรงหรือพิกัด

HTML
<area shape="default" alt="Default Link" href="https://example.com/default">

การประยุกต์ใช้งาน

การนำไปใช้ในแผนที่โลก สามารถใช้แท็ก <map> เพื่อกำหนดพื้นที่คลิกบนแผนที่โลก โดยแต่ละพื้นที่จะเชื่อมโยงไปยังข้อมูลหรือหน้าที่เกี่ยวข้องกับประเทศนั้น ๆ

HTML
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">

<map name="worldmap">
  <area shape="poly" coords="..." alt="Country 1" href="https://example.com/country1">
  <area shape="poly" coords="..." alt="Country 2" href="https://example.com/country2">
</map>

การสร้างเมนูบนรูปภาพ สามารถใช้สร้างเมนูที่ซ้อนอยู่บนรูปภาพ เช่น การคลิกที่ส่วนต่าง ๆ ของรูปเพื่อเปลี่ยนหน้าหรือเข้าถึงฟังก์ชันต่าง ๆ

HTML
<img src="menu-image.jpg" alt="Interactive Menu" usemap="#menu">

<map name="menu">
  <area shape="rect" coords="..." alt="Home" href="home.html">
  <area shape="rect" coords="..." alt="About" href="about.html">
  <area shape="rect" coords="..." alt="Contact" href="contact.html">
</map>

การใช้งานร่วมกับ JavaScript สามารถเพิ่มการโต้ตอบ เช่น การแสดงข้อมูลเพิ่มเติมเมื่อเลื่อนเมาส์ผ่าน หรือแสดงป็อปอัพ

HTML
<img src="interactive-image.jpg" alt="Interactive" usemap="#interactiveMap">

<map name="interactiveMap">
  <area shape="circle" coords="..." alt="Info 1" href="javascript:void(0);" onclick="showInfo(1)">
  <area shape="rect" coords="..." alt="Info 2" href="javascript:void(0);" onclick="showInfo(2)">
</map>

<script>
  function showInfo(infoId) {
    alert('Information ' + infoId);
  }
</script>

สรุป

แท็ก <map> ใน HTML5 ใช้ในการสร้างแผนที่ภาพแบบโต้ตอบ โดยสามารถประยุกต์ใช้งานในหลากหลายรูปแบบ เช่น แผนที่โลก เมนูบนรูปภาพ หรือการโต้ตอบผ่าน JavaScript

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ