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:
- Itu
Tag HTML yang memungkinkan browser untuk buat area yang dapat ditautkan melalui gambar. Baca lebih lanjut di
elemen di posting saya sebelumnya.
- Itu
usemap
atribut darimenandai, yang menghubungkan gambar ke peta gambar.
- 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:
- tepi kiri gambar & tepi kiri area tautan
- tepi atas gambar & tepi atas area tautan
- tepi kiri gambar & tepi kanan area tautan
- 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.
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).