Cara Melapisi Koordinat X dan Y pada Gambar Menggunakan JavaScript
Table of content:
Teknik JavaScript ini dapat digunakan untuk banyak efek, termasuk tooltips dan peta gambar.
Baca Juga:
Situs web interaktif dapat memberikan pengalaman yang lebih menarik bagi pengguna. Ada banyak cara untuk membuat situs web lebih interaktif, seperti menambahkan animasi, tooltips, atau efek tambahan lainnya.
Beberapa situs web juga menampilkan informasi saat pengguna mengarahkan kursor ke suatu elemen di halaman. Ini termasuk peta atau data visual lainnya yang memungkinkan pengguna mengarahkan kursor ke atas gambar untuk melihat titik data menggunakan tooltip.
Anda dapat mencapai efek ini menggunakan HTML, CSS, dan JavaScript menggunakan teknik CSS tertentu dan konsep JavaScript DOM.
Gambar dapat menjadi cara yang berguna untuk menyampaikan informasi dengan cara yang menarik secara visual di laman web. Mereka juga berguna untuk menambahkan efek menarik lainnya seperti galeri gambar sederhana.
Anda dapat menambahkan keterangan alat pada gambar dalam HTML menggunakan CSS dan JavaScript.
Kode yang digunakan dalam proyek ini tersedia di sini repo GitHub di bawah lisensi MIT.
- Dalam file baru bernama index.html, tambahkan struktur dasar file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image Tooltip Example</title>
</head>
<body></body>
</html> - Di dalam tag body, tambahkan div container. Div ini akan menyertakan elemen gambar dan tooltip:
<div class="container"></div>
- Di dalam wadah, tambahkan gambar. Pastikan gambar dengan nama file yang cocok berada di dalam folder yang sama dengan file HTML Anda:
<img src="image.jpg" class="image" height="420" width="840" alt="Your Image"> - Di bawah gambar, tambahkan div untuk mewakili tooltip:
<div class="tooltip"></div> - Di tag kepala, tambahkan tag gaya. Di dalam tag gaya, tambahkan beberapa gaya untuk penampung gambar dan tooltip:
<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> - Buat tag skrip baru di bagian bawah tag tubuh:
<body>
<script>
</script>
</body> - Di dalam tag skrip, gunakan fungsi pemilih DOM, querySelector, untuk mendapatkan elemen HTML dari gambar dan tooltip:
const image = document.querySelector('.image');
const tooltip = document.querySelector('.tooltip'); - Tambahkan pendengar acara untuk gerakan mouse peristiwa. Fungsi ini akan berjalan saat Anda mengarahkan mouse ke atas gambar. Saat ini terjadi, tooltip akan ditampilkan di layar:
image.addEventListener('mouseover', () => {
tooltip.style.display = 'block';
}); - Tambahkan pendengar acara untuk mouseout peristiwa. Fungsi ini akan berjalan ketika mouse meninggalkan gambar. Saat ini terjadi, tooltip akan hilang dari layar:
image.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
}); - Buka file index.html di browser apa saja, dan arahkan kursor ke atas gambar untuk melihat tooltip:
Cara Menghitung dan Menampilkan Koordinat Piksel X dan Y pada Gambar
Sekarang tooltip terlihat di halaman, ubah posisinya dan teksnya untuk menampilkan koordinat X dan Y mouse.
- Ubah gaya CSS tooltip, sehingga tooltip tidak terlihat sebelum Anda mengarahkan kursor ke gambar. Ini mencegah Anda melihat tooltip di bagian bawah gambar sebelum melompat ke lokasi kursor:
.tooltip {
position: absolute;
top: -30px;
left: 0;
display: none;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
} - Di dalam tag skrip, tambahkan pendengar acara lain, untuk mendengarkan mousemove peristiwa. Fungsi ini akan dijalankan terus menerus setiap kali mouse Anda melayang di atas piksel baru. Tambahkan parameter peristiwa, yang akan memasukkan informasi tentang mousemove peristiwa ke dalam fungsi. Informasi ini mencakup koordinat gambar tempat mouse berada pada titik tersebut:
image.addEventListener('mousemove', (e) => {});
- Menggunakan acara tersebut, ubah posisi horizontal tooltip menggunakan properti CSS kiri. Setiap kali mouse bergerak, nilai ini akan diperbarui agar sesuai dengan koordinat X kursor, yang disimpan di klienX variabel:
tooltip.style.left = e.clientX + 'px'; - Ubah posisi vertikal tooltip menggunakan properti CSS teratas. KlienY mewakili koordinat y dari mouse. Itu offsetHeight properti mencakup padding atau batas tambahan di dalam tooltip. Karena Anda tidak ingin tooltip langsung berada di tempat kursor berada, Anda dapat menghapus 10px tambahan dari posisi:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Ubah konten teks tooltip untuk menampilkan koordinat:
tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`; - Buka file index.html di browser apa pun, dan arahkan kursor ke atas gambar untuk melihat tooltip yang diperbarui:
Menambahkan Efek ke Halaman Web Interaktif Anda
Sekarang Anda mengerti cara menambahkan tooltip interaktif pada gambar di halaman web Anda. Anda dapat terus meningkatkan keterampilan HTML dan CSS Anda dengan bereksperimen dengan efek HTML menarik lainnya.
Artikel Terkait
