Beranda » Coding » Cara Membuat Efek Zoom Zoom murni onClick

    Cara Membuat Efek Zoom Zoom murni onClick

    CSS tidak memiliki pseudoclass untuk menargetkan acara klik, dan ini merupakan salah satu dari poin nyeri terbesar pengembang front-end. Kelas pseudo terdekat adalah :aktif yang gaya elemen untuk periode waktu pengguna menekan mouse mereka di atasnya.

    Namun efek ini berumur pendek: begitu pengguna melepaskan mouse, :aktif tidak bekerja lagi. Kita perlu menemukan cara lain untuk melakukannya meniru acara klik di CSS.

    Posting ini telah ditulis sebagai tanggapan atas permintaan pembaca, dan akan dijelaskan caranya targetkan acara klik dengan CSS murni dalam kasus penggunaan tertentu, zoom gambar.

    Anda dapat melihat hasil akhir di bawah ini - solusi khusus CSS untuk zoom gambar saat klik.

    Kapan Menggunakan Solusi Hanya CSS

    Sebelum saya melanjutkan, saya ingin mengatakan, bahwa untuk zoom gambar, saya merekomendasikan metode hanya CSS (yang mengubah dimensi gambar), hanya ketika Anda menginginkan tunggal atau a sekelompok beberapa gambar untuk memiliki fitur zoom.

    Untuk sebuah layak galeri, JavaScript memberikan lebih banyak fleksibilitas dan efisiensi.

    Teknik Front-End Kami Akan Menggunakan

    Sekarang Anda telah diperingatkan, mari kita cepat melihat 3 teknik utama kami akan menggunakan:

    1. Itu Tag HTML yang memungkinkan browser untuk buat area yang dapat ditautkan melalui gambar. Baca lebih lanjut di elemen di posting saya sebelumnya.
    2. Itu usemap atribut dari menandai, yang menghubungkan gambar ke peta gambar.
    3. Itu :target CSS pseudo-class yang mewakili elemen yang telah ditargetkan menggunakan pemilih ID-nya.
    1. Buat Basis HTML

    Pertama, mari kita buat basis HTML. Dalam kode di bawah ini, kami tambahkan gambar yang akan diperbesar dan diperluas & tutup ikon tombol untuk memperbesar dan memperkecil.

        

    Penting untuk memiliki ID pada gambar untuk diperbesar, dan tombol Tutup harus berupa tautan yang memiliki href = "#" atribut, saya akan jelaskan mengapa nanti di posting.

    2. Tambahkan CSS

    Awalnya, ikon Tutup tidak boleh ditampilkan. Itu posisi, batas-, kiri, dan bawah properti tempat itu Buka dan Tutup ikon di mana kita ingin mereka berada - di sudut kanan atas gambar.

    Itu pointer-events: tidak ada; aturan memungkinkan acara mouse melewati ikon Bentangkan dan mencapai gambar.

     .img tinggi: 150px; lebar: 200px;  .close background-image: url ("Close-icon.png"); background-repeat: no-repeat; bawah: 418px; display: tidak ada; tinggi: 32px; kiri: 462px; margin-top: -32px; posisi: relatif; lebar: 32px; . Perlu bawah: 125px; margin-left: -32px; margin-right: 16px; pointer-events: tidak ada; posisi: relatif;  
    Keadaan awal dengan terlihat Perluas dan sembunyikan ikon Tutup
    3. Tambahkan Peta Gambar

    Di peta gambar, peta area yang bisa diklik seharusnya di sudut kanan atas dari gambar tepat di bawah ikon Expand, dan tentang ukurannya. Tempatkan elemen sebelum yang pertama tag dalam HTML. Kami akan mengikat gambar ke peta di langkah berikutnya.

        

    Dalam blok kode di atas, tag mendefinisikan bentuk, ukuran, dan URI dari area yang dapat ditautkan di dalam peta gambar. Untuk sebuah bentuk persegi panjang, itu bentuk atribut mengambil persegi panjang nilai, dan empat nilai dari coords atribut mewakili jarak dalam piksel antara:

    1. tepi kiri gambar & tepi kiri area tautan
    2. tepi atas gambar & tepi atas area tautan
    3. tepi kiri gambar & tepi kanan area tautan
    4. tepi atas gambar & tepi bawah area tautan

    Nilai dari href atribut harus menjadi pengidentifikasi hash gambar (Inilah sebabnya mengapa gambar harus memiliki id).

    4. Ikatkan gambar ke Peta Gambar

    Tambahkan usemap atribut ke gambar sehingga ikat ke peta gambar. Nilainya harus menjadi representasi hash dari nama atribut dari menandai kami menambahkan pada Langkah 3.

      

    Area peta gambar yang dapat diklik sekarang terletak di belakang tombol Expand. Ketika pengguna mengklik tombol Perluas, itu adalah area yang dapat diklik yang sebenarnya diklik - ingat bahwa kami membuat tombol Perluas “mendingan” dengan pointer-events: tidak ada; aturan dalam Langkah 2.

    Dengan cara ini pengguna menargetkan gambar itu sendiri dengan mengkliknya, dan setelah klik URI akan berakhiran dengan "# img1" pengidentifikasi fragmen.

    5. Gaya itu :target Pseudo-Class

    Sampai "# img1" pengidentifikasi fragmen adalah di akhir URI, gambar yang ditargetkan dapat ditata dengan :target kelas semu

    Dimensi gambar yang ditargetkan bertambah, tombol Tutup ditampilkan, dan tombol Perluas disembunyikan.

     .img: target tinggi: 450px; lebar: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  
    Gambar yang diperbesar dengan tombol Tutup Terlihat
    Cara Tombol Tutup Bekerja

    Ketika tombol Tutup ditambahkan sebagai gambar latar belakang (Langkah 2), dan sebenarnya adalah sebuah tag dengan href = # atribut (Langkah 1), ketika diklik, itu menghapus pengidentifikasi fragmen dari akhir URI. Karena itu juga menghapus :target kelas semu dari gambar, dan gambar kembali ke ukuran sebelumnya.

    Sekarang efek zoom-on-klik CSS-only dilakukan, lihat demo di bawah ini, atau baca sedikit lebih banyak tentang teori di balik peta gambar di bagian selanjutnya.

    Info Latar Belakang: Mengapa dan tidak ?

    Sekarang, Anda tentu mengerti bahwa yang paling penting untuk solusi CSS-only ini adalah untuk bekerja targetkan gambar menggunakan href = "# imgid" atribut, yang juga bisa dilakukan menggunakan tag bukan peta gambar.

    Ini mungkin benar, namun ketika datang ke gambar, menggunakan elemen lebih tepat. Yang lebih penting adalah saat Anda ingin melakukan zoom terjadi pada mengklik area yang lebih besar pada gambar bukan hanya pada ikon Perluas, memberi Anda solusi mudah.

      

    Itu standar nilai untuk bentuk atribut menciptakan a area tautan persegi yang mencakup seluruh gambar. Jika Anda menggunakannya alih-alih, Anda harus membuat kode untuk menutupi gambar, dan Anda mungkin juga harus menggunakan elemen pembungkus untuk tujuan yang sama.

    Untuk juga berbicara tentang peringatan dari solusi ini, the pointer-events Properti CSS (kami digunakan pada Langkah 2) didukung oleh Internet Explorer hanya dari versi 11.

    Untuk mendukung browser IE sebelum itu, Anda mungkin ingin menggunakannya dari pada , atau gambar diperbesar dengan mengklik di mana saja di atasnya (dalam hal ini tidak perlu untuk ikon Perluas).