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:

<a href="链接地址"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html klik pada gambar untuk melompat ke gambar" ></a>

Antaranya, digunakan untuk menentukan alamat pautan yang hendak dilompat, dan atribut href dalam teg img digunakan untuk menentukan URL imej. src

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

<a href="https://www.baidu.com"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html klik pada gambar untuk melompat ke gambar" ></a>

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

atribut, seperti berikut Paparan: target="_blank"

<a href="https://www.baidu.com" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html klik pada gambar untuk melompat ke gambar" ></a>

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:

<script>
    function jumpToPage() {
        location.href = "目标页面地址";
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" onclick="jumpToPage()" alt="html klik pada gambar untuk melompat ke gambar" >

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:

<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy"  id="pic1" / alt="html klik pada gambar untuk melompat ke gambar" >
<img  src="/static/imghwm/default1.png"  data-src="图片2地址"  class="lazy"  id="pic2"   style="max-width:90%" / alt="html klik pada gambar untuk melompat ke gambar" >

Kemudian, ikat acara

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

<script>
    function jumpToImage() {
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        if (pic1.style.display == "none") {
            pic1.style.display = "inline";
            pic2.style.display = "none";
        } else {
            pic1.style.display = "none";
            pic2.style.display = "inline";
        }
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy" onclick="jumpToImage()" alt="html klik pada gambar untuk melompat ke gambar" >

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!