Teknik JavaScript ini dapat digunakan untuk banyak efek, termasuk tooltips dan peta gambar.

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 gambar untuk melihat titik data menggunakan tooltip.

Anda dapat mencapai efek ini menggunakan HTML, CSS, dan JavaScript menggunakan teknik CSS tertentu dan konsep DOM JavaScript.

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 a 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.

instagram viewer
  1. Dalam file baru bernama index.html, tambahkan struktur dasar file HTML:
    html>
    <html>
    <kepala>
    <judul>Contoh Tooltip Gambarjudul>
    kepala>
    <tubuh>
    tubuh>
    html>
  2. Di dalam tag body, tambahkan div container. Div ini akan menyertakan elemen gambar dan tooltip:
    <divkelas="wadah">
    div>
  3. Di dalam wadah, tambahkan gambar. Pastikan gambar dengan nama file yang cocok berada di dalam folder yang sama dengan file HTML Anda:
    <imgsrc="gambar.jpg"kelas="gambar"tinggi="420"lebar="840"alt="Gambar Anda">
  4. Di bawah gambar, tambahkan div untuk mewakili tooltip:
    <divkelas="keterangan alat">div>
  5. Di tag kepala, tambahkan tag gaya. Di dalam tag gaya, tambahkan beberapa gaya untuk penampung gambar dan tooltip:
    <gaya>
    .wadah {
    posisi: relatif;
    menampilkan: inline-blok;
     }

    .tooltip {
    posisi: mutlak;
    kiri: 0;
    menampilkan: tidak ada;
    lapisan: 5px;
    warna latar belakang: #000;
    warna: #fff;
    ukuran huruf: 12px;
     }
    gaya>
  6. Buat tag skrip baru di bagian bawah tag tubuh:
    <tubuh>
     Konten halaman web Anda di sini 
    <naskah>
    naskah>
    tubuh>
  7. Di dalam tag skrip, gunakan pemilih DOM fungsi, querySelector, untuk mendapatkan elemen HTML dari gambar dan tooltip:
    const gambar = dokumen.querySelector('.gambar');
    const keterangan alat = dokumen.querySelector('.keterangan alat');
  8. 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:
    gambar.addEventListener('mouseover', () => {
     tooltip.style.display = 'memblokir';
    });
  9. Tambahkan pendengar acara untuk mouseout peristiwa. Fungsi ini akan berjalan ketika mouse meninggalkan gambar. Saat ini terjadi, tooltip akan hilang dari layar:
    gambar.addEventListener('mouseout', () => {
     tooltip.style.display = 'tidak ada';
    });
  10. 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.

  1. 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 {
    posisi: mutlak;
    atas: -30px;
    kiri: 0;
    menampilkan: tidak ada;
    lapisan: 5px;
    warna latar belakang: #000;
    warna: #fff;
    ukuran huruf: 12px;
    }
  2. 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:
    gambar.addEventListener('mousemove', (e) => {
    });
  3. 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';
  4. Ubah posisi vertikal tooltip menggunakan properti CSS teratas. KlienY mewakili koordinat y 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';
  5. Ubah konten teks tooltip untuk menampilkan koordinat:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. 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.