Jendela pop-up atau pop-under menjadi semakin populer di Internet. Atau, lebih sederhana, gambar pop-up. Banyak pemilik situs sering kali harus membuatnya untuk tujuan periklanan, tetapi tidak semua orang mengetahui algoritme pembuatannya.
Itu perlu
- - Penyunting HTML;
- - buku catatan;
- - tuan rumah.
instruksi
Langkah 1
Buat atau buka halaman web baru dalam HTML atau editor teks. Anda dapat menggunakan program populer seperti Dreamweaver, Expression Web, dan lainnya untuk tujuan ini. Jika Anda baru memulai langkah pertama dalam bahasa pemrograman HTML, gunakan "notepad" biasa.
Langkah 2
Tempelkan kode berikut di antara tag "head" dan "/ head":
.thumbnail {posisi: relatif; indeks-z: 0;}
.thumbnail: hover {background-color: transparent; indeks-z: 50;}
.thumbnail span {/ * CSS untuk gambar yang diperbesar * / position: absolute; warna latar belakang: kuning muda; bantalan: 5 piksel; kiri: -1000 piksel; perbatasan: 1px abu-abu putus-putus; visibilitas: tersembunyi; warna hitam; dekorasi teks: tidak ada;}
.thumbnail span img {/ * CSS untuk gambar yang diperbesar * / border-width: 0; bantalan: 2px;}
.thumbnail: rentang hover {/ * CSS untuk gambar yang diperbesar saat melayang * / visibilitas: terlihat; atas: 0; kiri: 65px; / * posisi di mana gambar yang diperbesar harus diimbangi secara horizontal * /}
Langkah 3
Sesuaikan offset horizontal gambar popup dengan mengubah nilai pada baris kode terakhir. Alokasikan spasi antara tag "body" dan "/ body" di mana Anda ingin gambar muncul di halaman web. Kemudian salin dan tempel kode berikut:
Contoh judul teks
Contoh judul teks"
Langkah 4
Ganti "folder / largepci1.jpg" dengan file yang digunakan untuk foto popup. Lakukan hal yang sama dengan blok kode kedua. Ubah baris "Contoh judul teks" di dalamnya menjadi apa yang harus ditulis pada gambar pop-up. Ubah juga nilai tinggi dan lebar dalam kode untuk menyesuaikan ukuran gambar pop-up. Buat blok kode tambahan untuk menambahkan lebih banyak sketsa. Masukkan atribut, tag, dan teks lain dalam dokumen HTML sesuai kebutuhan. Simpan file HTML dan kemudian unggah ke server web Anda.
