Bạn có thể sử dụng JavaScript để tạo bản đồ hình ảnh phía máy khách. Bản đồ hình ảnh phía máy khách được kích hoạt bởi thuộc tính usemap cho thẻ và được xác định bởi các thẻ mở rộng và đặc biệt.
Hình ảnh sẽ tạo thành bản đồ được chèn vào trang bằng cách sử dụng phần tử như bình thường, ngoại trừ việc nó mang một thuộc tính bổ sung gọi là usemap. Giá trị của thuộc tính usemap là giá trị của thuộc tính tên trên phần tử mà bạn sắp gặp, đứng trước dấu thăng hoặc dấu thăng.
Phần tử thực sự tạo bản đồ cho hình ảnh và thường theo ngay sau phần tử . Nó hoạt động như một vùng chứa cho các phần tử thực sự xác định các điểm phát sóng có thể nhấp. Phần tử chỉ mang một thuộc tính, thuộc tính name, là tên xác định bản đồ. Đây là cách phần tử
biết phần tử nào sẽ được sử dụng.
Phần tử chỉ định hình dạng và tọa độ xác định ranh giới của từng điểm phát sóng có thể nhấp.
Đoạn mã sau kết hợp sơ đồ hình ảnh và JavaScript để tạo thông báo trong hộp văn bản khi di chuột qua các phần khác nhau của hình ảnh.
<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>
