Cách tạo lớp phủ tọa độ X và Y trên ảnh bằng JavaScript
Kỹ thuật JavaScript này có thể được sử dụng cho nhiều hiệu ứng, bao gồm chú giải công cụ và bản đồ hình ảnh.
Các trang web tương tác có thể cung cấp trải nghiệm hấp dẫn hơn cho người dùng. Có nhiều cách bạn có thể làm cho trang web có tính tương tác cao hơn, chẳng hạn như thêm hoạt ảnh, chú giải công cụ hoặc các hiệu ứng bổ sung khác.
Một số trang web cũng hiển thị thông tin khi người dùng di chuột qua một thành phần trên trang. Điều này bao gồm bản đồ hoặc dữ liệu trực quan khác cho phép người dùng di chuột qua hình ảnh để xem điểm dữ liệu bằng chú giải công cụ.
Bạn có thể đạt được hiệu ứng này bằng cách sử dụng HTML, CSS và JavaScript bằng cách sử dụng các kỹ thuật CSS nhất định và các khái niệm JavaScript DOM.
Hình ảnh có thể là một cách hữu ích để truyền tải thông tin theo cách hấp dẫn trực quan trên trang web. Chúng cũng hữu ích để thêm các hiệu ứng hấp dẫn khác, chẳng hạn như một bộ sưu tập hình ảnh đơn giản.
Bạn có thể thêm chú giải công cụ trên hình ảnh trong HTML bằng CSS và JavaScript.
Mã được sử dụng trong dự án này có sẵn trong repo GitHub này theo giấy phép MIT.
- Trong tệp mới có tên index.html, hãy thêm cấu trúc cơ bản của tệp HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image Tooltip Example</title>
</head>
<body></body>
</html> - Bên trong thẻ body, thêm div vùng chứa. Div này sẽ bao gồm cả phần tử hình ảnh và chú giải công cụ:
<div class="container"></div>
- Bên trong vùng chứa, thêm một hình ảnh. Đảm bảo hình ảnh có tên tệp phù hợp nằm trong cùng thư mục với tệp HTML của bạn:
<img src="image.jpg" class="image" height="420" width="840" alt="Your Image"> - Bên dưới hình ảnh, thêm một div để thể hiện chú giải công cụ:
<div class="tooltip"></div> - Trong thẻ đầu, hãy thêm thẻ kiểu. Bên trong thẻ kiểu, hãy thêm một số kiểu cho bộ chứa hình ảnh và chú giải công cụ:
<style>
.container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
left: 0;
display: none;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
}
</style> - Tạo một thẻ script mới ở cuối thẻ body:
<body>
<script>
</script>
</body> - Bên trong thẻ script, hãy sử dụng hàm bộ chọn DOM, querySelector, để lấy các phần tử HTML của hình ảnh và chú giải công cụ:
const image = document.querySelector('.image');
const tooltip = document.querySelector('.tooltip'); - Thêm một trình lắng nghe sự kiện cho Di chuột lên trên sự kiện. Chức năng này sẽ chạy khi bạn đưa chuột vào hình ảnh. Khi điều này xảy ra, tooltip sẽ hiển thị trên màn hình:
image.addEventListener('mouseover', () => {
tooltip.style.display = 'block';
}); - Thêm một trình lắng nghe sự kiện cho di chuột ra ngoài sự kiện. Chức năng này sẽ chạy khi chuột rời khỏi hình ảnh. Khi điều này xảy ra, chú giải công cụ sẽ biến mất khỏi màn hình:
image.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
}); - Mở tệp index.html trong bất kỳ trình duyệt nào và di chuột qua hình ảnh để xem chú giải công cụ:
Cách tính toán và hiển thị tọa độ pixel X và Y của hình ảnh
Bây giờ chú giải công cụ đã hiển thị trên trang, hãy thay đổi vị trí và văn bản của nó để hiển thị tọa độ X và Y của chuột.
- Thay đổi kiểu CSS của chú giải công cụ để chú giải công cụ không hiển thị trước khi bạn di chuột qua hình ảnh. Điều này ngăn bạn nhìn thấy chú giải công cụ ở cuối hình ảnh trước khi chuyển đến vị trí của con trỏ:
.tooltip {
position: absolute;
top: -30px;
left: 0;
display: none;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
} - Bên trong thẻ script, thêm một trình xử lý sự kiện khác, để lắng nghe di chuột sự kiện. Chức năng này sẽ thực hiện liên tục mỗi khi chuột của bạn di chuột qua một pixel mới. Thêm tham số sự kiện, tham số này sẽ nhập thông tin về di chuột sự kiện vào chức năng. Thông tin này bao gồm tọa độ hình ảnh mà con chuột đang ở điểm đó:
image.addEventListener('mousemove', (e) => {});
- Sử dụng sự kiện, thay đổi vị trí nằm ngang của chú giải công cụ bằng thuộc tính CSS bên trái. Mỗi khi chuột di chuyển, giá trị này sẽ cập nhật giá trị khớp với tọa độ X của con trỏ, được lưu trong khách hàngX Biến đổi:
tooltip.style.left = e.clientX + 'px'; - Thay đổi vị trí dọc của chú giải công cụ bằng thuộc tính CSS trên cùng. khách hàngY đại diện cho tọa độ y của chuột. Các chiều cao bù đắp bao gồm bất kỳ phần đệm hoặc đường viền bổ sung nào bên trong chú giải công cụ. Vì bạn không muốn chú giải công cụ trực tiếp ở vị trí con trỏ, bạn có thể xóa thêm 10px khỏi vị trí:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Thay đổi nội dung văn bản của chú giải công cụ để hiển thị tọa độ:
tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`; - Mở tệp index.html trong bất kỳ trình duyệt nào và di chuột qua hình ảnh để xem chú giải công cụ được cập nhật:
Thêm hiệu ứng vào trang web tương tác của bạn
Bây giờ bạn đã hiểu cách thêm chú giải công cụ tương tác trên hình ảnh trên trang web của mình. Bạn có thể tiếp tục nâng cao kỹ năng HTML và CSS của mình bằng cách thử nghiệm các hiệu ứng HTML thú vị khác.