Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh menindih kotak pilihan pada imej untuk pemilihan?

Bagaimanakah saya boleh menindih kotak pilihan pada imej untuk pemilihan?

Barbara Streisand
Barbara Streisandasal
2024-11-28 01:28:13439semak imbas

How Can I Overlay Checkboxes on Images for Selection?

Memilih Imej Menggunakan Kotak Pilihan

Memaparkan kotak pilihan di atas imej untuk pemilihan memerlukan gabungan penanda HTML dan penggayaan CSS.

Penanda HTML

Untuk memasukkan kotak pilihan dalam HTML anda, gunakan kod berikut:

<input type="checkbox" class="checkbox">

Ganti "check1" dengan ID unik untuk setiap kotak pilihan.

Penggayaan CSS

Untuk meletakkan kotak pilihan di atas imej, gunakan peraturan CSS yang menetapkan kedudukan kepada "mutlak" dan nyatakan sifat "bawah" dan "kanan" untuk "0px":

.checkbox {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

JavaScript

Untuk mengendalikan klik kotak pilihan dan melakukan tindakan yang sesuai, anda boleh menggunakan pendengar acara JavaScript. Contohnya:

document.querySelectorAll('.checkbox').forEach(checkbox => {
  checkbox.addEventListener('click', event => {
    // Handle checkbox click event here
  })
});

Kes ujian langsung yang disediakan menunjukkan pelaksanaan ini, di mana setiap kotak pilihan boleh diklik untuk memilih atau menyahpilih imej yang sepadan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menindih kotak pilihan pada imej untuk pemilihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn