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