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;  

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;  

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.

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.

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