imej html klik untuk melompat

Dalam reka bentuk web, selalunya perlu menambah pautan pada imej supaya pengguna boleh melompat ke halaman atau alamat pautan yang ditentukan dengan mengklik pada imej. Sangat mudah untuk melaksanakan fungsi ini dalam bahasa HTML Dalam artikel ini kami akan memperkenalkan cara menggunakan HTML untuk menulis lompatan klik imej.

Pertama, kita perlu menggunakan teg img dalam HTML untuk memasukkan imej Kod sampel adalah seperti berikut:

<img src="图片地址">

Antaranya, atribut src menentukan laluan atau alamat pautan. imej. Contohnya:

<img src="https://picsum.photos/200">

Ini akan memasukkan gambar rawak 200x200 daripada picsum.photos ke dalam halaman web.

Seterusnya, kita perlu menambah pautan pada imej ini. Fungsi pautan boleh dilaksanakan menggunakan teg dalam HTML Kita boleh menggunakan tag pada teg img Kod contoh adalah seperti berikut:

<img src="图片地址">

Antaranya, atribut href menentukan alamat pautan, untuk. contoh:

<img src="https://picsum.photos/200">

Ini akan menambah pautan pada imej dan mengklik pada imej akan melompat ke halaman utama Baidu.

Tetapi bagaimana jika kita mahu pautan ini dibuka dalam tetingkap baharu? Fungsi ini boleh dicapai menggunakan atribut sasaran membuka pautan dalam tetingkap baharu, contohnya:

<img src="图片地址">

Ini akan menambah pautan pada imej dan membuka halaman utama Baidu dalam tetingkap baharu.

Selain memasukkan teg img dalam teg untuk merealisasikan lompat klik imej, ia juga boleh dicapai melalui gaya CSS. Gunakan atribut imej latar belakang dalam CSS untuk memasukkan imej ke dalam latar belakang elemen, dan kemudian gunakan teg untuk melaksanakan pautan Kod sampel adalah seperti berikut:

<img src="https://picsum.photos/200">

Antaranya, atribut gaya. menentukan gaya pautan, termasuk imej latar belakang , lebar dan tinggi, dsb., contohnya:

<a href="链接地址" target="_blank" style="background-image: url(图片地址); display: block; width: 宽度; height: 高度;"></a>

Ini akan memasukkan imej rawak 200x200 ke dalam halaman web selepas mengklik, halaman utama Baidu akan dibuka dalam tetingkap baharu.

Ringkasnya, untuk mencapai lompatan klik imej, anda perlu menggunakan teg dan teg img dalam HTML untuk mencapai lompatan dengan menambahkan alamat pautan dan atribut sasaran. Ini juga boleh dicapai menggunakan sifat imej latar belakang dalam CSS. Fungsi ini sangat kritikal untuk reka bentuk web Saya harap artikel ini dapat membantu anda menyelesaikan reka bentuk web dengan lebih baik.

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