Pop-up veya pop-under pencereler internette giderek daha popüler hale geliyor. Veya daha basit olarak, açılır resimler. Birçok site sahibi genellikle bunları reklam amacıyla yapmak zorundadır, ancak herkes yaratımlarının algoritmasını bilmez.
Bu gerekli
- - HTML düzenleyicisi;
- - not defteri;
- - barındırma.
Talimatlar
Aşama 1
HTML'de veya bir metin düzenleyicide yeni bir web sayfası oluşturun veya açın. Bu amaçla Dreamweaver, Expression Web ve diğerleri gibi popüler programları kullanabilirsiniz. HTML programlama dilinde ilk adımlarınızı atıyorsanız, normal bir "not defteri" kullanın.
Adım 2
Aşağıdaki kodu "head" ve "/ head" etiketleri arasına yapıştırın:
.thumbnail {konum: göreli; z-endeksi: 0;}
.thumbnail: üzerine gelin {arka plan rengi: şeffaf; z-endeksi: 50;}
.thumbnail yayılma alanı {/ * Büyütülmüş resim için CSS * / konum: mutlak; arka plan rengi: açık sarı; dolgu: 5 piksel; sol: -1000 piksel; sınır: 1px kesikli gri; görünürlük: gizli; siyah renk; metin dekorasyonu: yok;}
.thumbnail span img {/ * Büyütülmüş resim için CSS * / border-width: 0; dolgu: 2 piksel;}
.thumbnail: vurgulu yayılma {/ * vurgulu üzerinde büyütülmüş görüntü için CSS * / görünürlük: görünür; üst: 0; sol: 65 piksel; / * büyütülmüş görüntünün yatay olarak kayması gereken konum * /}
Aşama 3
Son kod satırındaki değeri değiştirerek açılır görüntünün yatay ofsetini ayarlayın. Resmin web sayfasında görünmesini istediğiniz yerde "body" ve "/ body" etiketleri arasında boşluk bırakın. Ardından aşağıdaki kodu kopyalayıp yapıştırın:
Bir metin başlığı örneği
Bir metin başlığı örneği"
4. Adım
"klasör / büyükpci1.jpg" dosyasını açılır fotoğraf için kullanılan dosyayla değiştirin. İkinci kod bloğu için de aynısını yapın. İçindeki "Örnek metin başlığı" satırını, açılır görüntüde yazılması gerekenle değiştirin. Ayrıca açılır görüntünün boyutunu ayarlamak için koddaki yükseklik ve genişlik değerlerini değiştirin. Daha fazla çizim eklemek için ek kod blokları oluşturun. Gerektiğinde HTML belgesine diğer nitelikleri, etiketleri ve metni girin. HTML dosyasını kaydedin ve ardından web sunucunuza yükleyin.
