Web sayfalarındaki düğmelerin arkadan aydınlatması genellikle iki resim kullanılarak düzenlenir. Fare imlecini belgenin ilgili öğesinin (bağlantı veya düğme) üzerine getirdiğinizde, CSS dilinde yazılan talimatlara uygun olarak tarayıcıdan bir görüntüyü diğerine değiştirmesini isteyen bir olay oluşturulur. Fare imleci düğmeden uzaklaştırıldığında, ters değiştirme gerçekleşir.
Gerekli
Temel HTML ve CSS dilleri bilgisi
Talimatlar
Aşama 1
Böyle bir vurgulama mekanizmasını uygulamak için birkaç seçenek vardır. Bunlardan herhangi biri için, yalnızca ilgili stil açıklamasını değiştirerek aynı HTML kodunu kullanabilirsiniz. Düğmenin HTML kodu şöyle görünebilir: düğmedeki metin İşte stil açıklamasının ekleneceği bu sayfa öğesinin tanımlayıcısı (id = "btnA").
Adım 2
Seçeneklerden birini uygulamak için, biri düğmeyi etkin olmayan durumda ve ikincisi arkadan aydınlatmalı olarak gösteren iki resim hazırlamanız gerekir. Bağlantının arka plan görüntüsü olarak kullanılacaklar. Bu düğme için CSS talimatları şöyle görünebilir:
a # btnA, a # btnA: ziyaret edildi {
Ekran bloğu;
genişlik: 50 piksel;
yükseklik: 20 piksel;
arka plan: url (btnA.gif) tekrarsız;
sınır: 0;
}
a # btnA: üzerine gelin {
arka plan: url (btnA_hover.gif) tekrarsız;
sınır: 0;
}
Burada, ilk blokta, düğmeyi gösteren görüntünün boyutları belirtilir (genişlik: 50 piksel; yükseklik: 20 piksel;). Bunları resminizin boyutlarıyla değiştirmeniz gerekir. Görüntü dosyalarının adları da aynı şekilde değiştirilmelidir: btnA.
Aşama 3
Bir alternatif, her iki resmi de tek bir resme koymaktır. Üst üste olabileceği gibi yan yana da olabilir. Ayrıca bağlantı için bir arka plan olarak kullanılacaktır. Düğme boyutları, düğme stili açıklamasında belirtildiğinden, bunlara uymayan hiçbir şey görünmez. Bu durumda, CSS açıklamasına yerleştirilen talimatlar, fare imlecini gezdirirken, vurgulanan düğmenin görüntüsünün bulunduğu alan çerçeveye düşecek şekilde arka plan görüntüsünü kaydırmalıdır. Bu seçenek için önceki adımdaki kod aşağıdaki gibi değiştirilmelidir:
a # btnA, a # btnA: ziyaret edilen {
Ekran bloğu;
genişlik: 50 piksel;
yükseklik: 20 piksel;
arka plan: url (btnA.gif) tekrarsız;
sınır: 0;
}
a # btnA: üzerine gelin {
arka plan: url (btnA.gif) tekrarsız 21 piksel;
sınır: 0;
}
Bu, görüntüleri üst üste yerleştirdiğinizi (altta vurgulanmıştır) ve btnA.gif"
