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