html klik pada gambar untuk melompat ke gambar

Mengklik HTML pada imej untuk melompat ke imej ialah teknik yang biasa digunakan dalam reka bentuk web, yang membolehkan pengguna melompat ke halaman web atau imej lain dengan mengklik pada imej. Artikel ini akan memperkenalkan cara menggunakan kod HTML untuk mencapai kesan ini.

1 Gunakan hiperpautan untuk melompat ke imej

Pertama sekali, gunakan kod berikut dalam HTML untuk melompat ke halaman lain melalui hiperpautan:

Antaranya, < Atribut > digunakan untuk menentukan alamat pautan yang hendak dilompat, dan atributhrefdalam tegimgdigunakan untuk menentukan URL imej.src

Sebagai contoh, berikut ialah contoh imej hiperpautan yang melompat ke halaman Baidu:

Untuk membuat imej hiperpautan terbuka dalam tetingkap baharu, anda boleh menggunakan

atribut, seperti berikut Paparan:target="_blank"

2. Gunakan JavaScript untuk melompat ke imej

Selain menggunakan hiperpautan, anda juga boleh menggunakan JavaScript untuk mengawal klik pada imej untuk melompat ke halaman sasaran . Ini perlu dilaksanakan melalui kod JS Ikat acara

pada imej Apabila pengguna mengklik, halaman akan melompat melalui kod JS.click

Kod sampel adalah seperti berikut:

Antaranya,

dalam kod JS digunakan untuk menentukan alamat halaman sasaran untuk melompat ke.location.href

3 Lompat ke imej lain daripada satu imej

Jika anda ingin melompat ke imej lain selepas mengklik pada imej, anda boleh menggunakan JavaScript untuk mencapai ini.

Mula-mula, anda perlu meletakkan dua teg imej dalam HTML dan tetapkan keadaan paparan awalnya, seperti berikut:

Kemudian, ikat acara

dalam kod JS dan tukar status paparan dua teg imej dalam fungsi pengendali acara, seperti ditunjukkan di bawah:click

Jalankan kod di atas, dan apabila imej diklik, ia akan bertukar antara dua teg imej.

Ringkasan:

Lompatan imej dalam halaman web boleh dicapai melalui hiperpautan dan JavaScript Kami boleh memilih kaedah yang paling sesuai untuk mencapai lompatan imej berdasarkan keperluan sebenar. Sama ada anda menggunakan hiperpautan atau JavaScript, anda boleh mencapai lompatan imej yang mudah dan berkesan.

Atas ialah kandungan terperinci html klik pada gambar untuk melompat ke gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!