JavaScript - แผนที่รูปภาพ

คุณสามารถใช้ JavaScript เพื่อสร้างแผนผังรูปภาพฝั่งไคลเอ็นต์ แผนที่ภาพฝั่งไคลเอ็นต์เปิดใช้งานโดยusemap แอตทริบิวต์สำหรับแท็ก <img /> และกำหนดโดยแท็กส่วนขยาย <map> และ <area> พิเศษ

รูปภาพที่กำลังจะสร้างแผนที่จะถูกแทรกลงในหน้าโดยใช้องค์ประกอบ <img /> ตามปกติยกเว้นว่าจะมีแอตทริบิวต์เพิ่มเติมที่เรียกว่า usemap. ค่าของแอตทริบิวต์ usemap คือค่าของแอตทริบิวต์ name บนองค์ประกอบ <map> ซึ่งคุณกำลังจะพบโดยนำหน้าด้วยเครื่องหมายปอนด์หรือแฮช

องค์ประกอบ <map> สร้างแผนที่สำหรับรูปภาพและมักจะตามหลังองค์ประกอบ <img /> โดยตรง ทำหน้าที่เป็นคอนเทนเนอร์สำหรับองค์ประกอบ <area /> ที่กำหนดฮอตสปอตที่คลิกได้ องค์ประกอบ <map> มีแอตทริบิวต์เดียวคือnameแอตทริบิวต์ซึ่งเป็นชื่อที่ระบุแผนที่ นี่คือวิธีที่องค์ประกอบ <img /> รู้ว่าจะใช้องค์ประกอบ <map> ใด

องค์ประกอบ <area> ระบุรูปร่างและพิกัดที่กำหนดขอบเขตของแต่ละฮอตสปอตที่คลิกได้

โค้ดต่อไปนี้รวม imagemaps และ JavaScript เพื่อสร้างข้อความในกล่องข้อความเมื่อเลื่อนเมาส์ไปที่ส่วนต่างๆของรูปภาพ

<html>   
   <head>
      <title>Using JavaScript Image Map</title>
      
      <script type = "text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //-->
      </script>
   </head>
   
   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20" />
      </form>
      
      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" 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 = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "rect" 
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('html')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "circle" 
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('php')" 
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

เอาต์พุต

คุณสามารถสัมผัสถึงแนวคิดแผนที่ได้โดยวางเคอร์เซอร์ของเมาส์บนวัตถุรูปภาพ