Hình ảnh ánh xạ HTML là một bản đồ hình ảnh phía máy khách với các khu vực có thể nhấp được hoạt động như các siêu liên kết trong tài liệu HTML. Để tạo mối quan hệ giữa bản đồ và img Phần tử HTML thuộc tính tên của bản đồ phần tử được liên kết với thuộc tính img usermap.
Cú pháp
Sau đây là cú pháp -
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
Hãy để chúng tôi xem một ví dụ về hình ảnh ánh xạ HTML−
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html> Đầu ra
Nhấp vào phần biểu trưng (con voi) của Hadoop trong hình ảnh để quan sát cách hoạt động của hình ảnh ánh xạ HTML−
