Cara membuat ikon tindanan imej menggunakan HTML dan CSS

Gambaran Keseluruhan

Tindanan imej ialah tindanan dua imej atau ikon di mana satu ikon atau imej dipaparkan pada skrin manakala ikon yang lain dipaparkan pada skrin apabila kursor melayang di atas imej pertama. Jadi, untuk melaksanakan ciri ini kita harus mempunyai pengetahuan asas tentang HTML dan CSS serta sifatnya untuk peralihan dan animasi. Jadi untuk mencipta tindanan, kita akan melihat beberapa contoh mencipta ikon tindanan dalam.

Algoritma

Langkah 1 - Buat fail HTML dalam penyunting teks dan buat plat dandang HTML dalam fail itu.

Langkah 2 − Sekarang buat bekas div yang mengandungi imej (salah satunya ialah imej statik) dan ikon imej lain (yang dipaparkan apabila anda mengarahkan tetikus ke atas imej).

Langkah 3 − Masukkan tag img dengan atribut src. Tambahkan pautan imej pada atribut src.

<img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="Cara membuat ikon tindanan imej menggunakan HTML dan CSS" >

Langkah 4 − Sekarang masukkan pautan CDN Awesome ke dalam tag kepala dokumen HTML. pautan CDN di bawah.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Langkah 5 − Sekarang gunakan kelas ikon pengguna hebat fon untuk membuat imej tindanan.

<i class="fa fa-user">

Langkah 6−Sekarang cipta fail style.css dalam folder yang sama dan pautkan fail style.css ke dokumen HTML.

<link rel="stylesheet" href="style.css">

Langkah 7 − Tetapkan gaya elemen HTML dan gayakannya supaya tindanan akan muncul apabila melayang di atas imej.

Langkah 8 − Tindanan imej telah berjaya dibuat.

Contoh

Dalam contoh ini, kami mencipta tindanan imej menggunakan imej dan ikon Hebat fon. Kelas ikon pengguna fon Awesome diimport daripada pustaka Awesome fon. Jadi untuk membina ini, kami mencipta dua fail dalam folder, satu fail mengandungi index.html yang mengandungi bahagian rangka fungsi dan fail lain ialah style.css yang mengandungi gaya dan bahagian utama fungsi Kerja.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
   
   


   

      <img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="Cara membuat ikon tindanan imej menggunakan HTML dan CSS" >
      

         
tutorialspoint.com
         
      
   

Imej yang diberikan di bawah adalah output contoh di atas, di mana imej pertama menunjukkan output apabila fungsi di atas dimuatkan dalam penyemak imbas dan imej kedua menunjukkan output apabila kursor melayang di atas imej pertama. Jadi apabila mana-mana pengguna melayang di atas imej yang diberikan, ia memaparkan imej bertindih.

Kesimpulan

Ciri ini digunakan dalam aplikasi seperti buku kenalan di mana profil pengguna dipaparkan pada imej dan apabila pengguna mengklik atau menuding pada imej, ia memaparkan butiran profil tertentu. Jika anda membina ciri ini, anda mesti menyemak sama ada imej atau ikon, imej statik dan imej yang dipaparkan pada tetikus harus mempunyai dimensi yang sama, iaitu lebar dan tinggi yang sama.

Atas ialah kandungan terperinci Cara membuat ikon tindanan imej menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!