Tipik olarak, web sitelerindeki grafik oklar, gezinmeyi düzenlemek için kullanılır. Böyle bir işaretçiyi tıkladığınızda, başka bir sayfaya veya mevcut sayfanın başka bir bölümüne gidersiniz. Bazen bazı eylemler bunlara bağlıdır - etiket alanının içeriğini vurgulama, bir JavaScript komut dosyası başlatma vb. Bu okun aktif bir öğe olduğunu vurgulamak için "vurgulama" efektini kullanın, yani. fareyle üzerine gelindiğinde görünümdeki değişiklikler.
Gerekli
Temel HTML ve CSS dilleri bilgisi
Talimatlar
Aşama 1
Ok vurgulamayı uygulamak için hangi mekanizmanın sizin için en iyisi olduğunu belirleyin. Birkaç tane var, bu talimatın sonraki adımlarında iki basit tane verilmiştir. Her ikisi de CSS vurgulu sözde sınıfını kullanır. Fare imleci bir grafik elemanının (ok) üzerindeyken, bu sözde sınıfta açıklanan stil ona uygulanır ve geri kalan zaman bu stil aktif değildir. Aşağıda açıklanan her iki seçenek için aynı HTML'yi kullanabilirsiniz. kod, ancak farklı stil açıklamaları. Sayfa kaynağındaki ok kodu aşağıdaki gibi yazılabilir: id niteliği, tarayıcının kendisine hangi stil açıklamalarının uygulanacağını belirleyeceği bağlantı tanımlayıcısını (okA) belirtir.
Adım 2
İlk seçenek, arkadan aydınlatmalı ve aydınlatmasız olmak üzere iki ok görüntüsü hazırlamanızı gerektirir. Bunları sırasıyla arrON.
a # okA, # okA: ziyaret edildi {
Ekran bloğu;
yükseklik: 30 piksel;
genişlik: 100 piksel;
arka plan: url (arrOFF.gif) tekrarsız;
sınır: 0;
}
a # okA: üzerine gelin {
arka plan: url (arrON.gif) tekrarsız;
sınır: 0;
}
İlk blok okun boyutlarını içerir (yükseklik: 30 piksel; genişlik: 100 piksel;) - bunları hazırlanan ok görüntülerinin boyutlarıyla değiştirin.
Aşama 3
İkinci seçenek, yalnızca bir görüntü dosyası ile geçmenize izin verir. Okun her iki görüntüsünü de içine yerleştirmeniz gerekir - hem vurgulanmış hem de etkin değil. Bunları yan yana koyabilirsiniz, üst üste koyabilirsiniz. Örnek kodda, vurgulanan okun etkin olmayan okun altına yerleştirildiğini ve dosyanın sizin tarafınızdan arr.
a # okA, # okA: ziyaret edildi {
Ekran bloğu;
genişlik: 100 piksel;
yükseklik: 30 piksel;
arka plan: url (arr.gif) tekrarsız;
sınır: 0;
}
a # okA: üzerine gelin {
arka plan: url (arr.gif) tekrarsız 31 piksel;
sınır: 0;
}
Burada da yeniden boyutlandırmayı unutmayın.
