Image Map trong JavaScript
Bạn có thể sử dụng JavaScript để tạo Image map ở client-side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>.
Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử <img /> như bình thường, ngoại trừ rằng nó mang theo thuộc tính bổ sung được gọi là usemap. Giá trị của thuộc tính usemap là giá trị thuộc tính name trên phần tử <map> mà bạn sắp thấy sau đây, được đặt trước bởi một dấu # hoặc ký hiệu $.
Phần tử <map> thực sự tạo bản đồ cho hình ảnh và thường trực tiếp theo sau phần tử <img />. Nó hoạt động như là một nơi chứa (container) cho phần tử <area /> mà thực sự định nghĩa các hotpot có thể click. Phần tử <map> chỉ mang một thuộc tính, thuộc tính name, mà là tên nhận diện bản đồ. Đây là cách phần tử <img /> biết phần tử <map> nào để sử dụng.
Phần tử <area> xác định hình dạng và tọa độ mà định nghĩa giới hạn (đường biên) của một hotpot có thể click.
Code sau kết nối các Image map và JavaScript để tạo một thông báo trong hộp văn bản khi di chuyển 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="QTM.com/perl/index.jsp" alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="QTM.com/html/index.jsp" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="QTM.com/php/index.jsp" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
Kết quả
Thực hiện theo phương thức trên để xem kết quả
Theo Tutorialspoint
Bài trước: Debug trong JavaScript
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
== và === trong JavaScript khác gì nhau?
-
JavaScript là gì?
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ/đồ thị động
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Hướng dẫn cài Windows 11, cài Win 11 bằng file ISO
Hôm qua 17 -
Kiểu dữ liệu trong Python: chuỗi, số, list, tuple, set và dictionary
Hôm qua 4 -
6 cách xem lịch sử giao dịch MBBank
Hôm qua -
Cách xóa bất cứ chi tiết nào trong ảnh với GIMP
Hôm qua -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Loli là gì? BB là gì?
Hôm qua 2 -
Giải phương trình bậc 2 một ẩn bằng Python
Hôm qua 3 -
Cách hiển thị My Computer, This PC trên Desktop của Windows 10
Hôm qua