Cara Membuat Gambar Pop Timbul

Isi kandungan:

Cara Membuat Gambar Pop Timbul
Cara Membuat Gambar Pop Timbul

Video: Cara Membuat Gambar Pop Timbul

Video: Cara Membuat Gambar Pop Timbul
Video: Ide Kreatif Cara Membuat Pop Up Book Sederhana 2024, Mungkin
Anonim

Tetingkap pop-up atau pop-under menjadi semakin popular di Internet. Atau, lebih mudah, gambar pop timbul. Banyak pemilik laman web sering membuatnya untuk tujuan pengiklanan, tetapi tidak semua orang mengetahui algoritma pembuatannya.

Cara membuat gambar pop timbul
Cara membuat gambar pop timbul

Ia perlu

  • - Penyunting HTML;
  • - buku nota;
  • - hosting.

Arahan

Langkah 1

Buat atau buka laman web baru dalam HTML atau penyunting teks. Anda boleh menggunakan program popular seperti Dreamweaver, Expression Web dan lain-lain untuk tujuan ini. Sekiranya anda baru mengambil langkah pertama dalam bahasa pengaturcaraan HTML, gunakan "notepad" biasa.

Langkah 2

Tampal kod berikut antara teg "kepala" dan "/ kepala":

.thumbnail {kedudukan: relatif; z-index: 0;}

.thumbnail: arahkan {latar-warna: telus; z-index: 50;}

.thumbnail span {/ * CSS untuk pembesaran gambar * / kedudukan: mutlak; latar belakang-warna: lightyellow; pembalut: 5px; kiri: -1000px; sempadan: 1px kelabu putus-putus; penglihatan: tersembunyi; warna: hitam; hiasan teks: tiada;}

.thumbnail span img {/ * CSS untuk gambar yang diperbesar * / lebar sempadan: 0; pembalut: 2px;}

.thumbnail: hover span {/ * CSS untuk gambar yang diperbesar pada hover * / visibility: terlihat; atas: 0; kiri: 65 piksel; / * kedudukan di mana gambar yang diperbesar harus mengimbangi secara mendatar * /}

Langkah 3

Laraskan offset mendatar gambar pop timbul dengan menukar nilai pada baris terakhir kod. Peruntukkan ruang antara tag "body" dan "/ body" di mana anda mahu gambar itu muncul di laman web. Kemudian salin dan tampal kod berikut:

Contoh tajuk teks

Contoh tajuk teks"

Langkah 4

Ganti "folder / Largeepci1.jpg" dengan fail yang digunakan untuk foto pop timbul. Lakukan perkara yang sama dengan blok kod kedua. Tukar baris "Contoh tajuk teks" di dalamnya menjadi yang harus ditulis dalam gambar pop timbul. Ubah juga nilai tinggi dan lebar dalam kod untuk menyesuaikan ukuran gambar pop timbul. Buat blok kod tambahan untuk menambah lebih banyak lakaran. Masukkan atribut, tag, dan teks lain dalam dokumen HTML jika diperlukan. Simpan fail HTML dan kemudian muat naik ke pelayan web anda.

Disyorkan: