Video: Dreamweaver - Rollover Image Oluşturma 2024
Dreamweaver'da Rollover görüntüleri - isminden de anlaşılacağı gibi - biri imleci bir imlecin üzerine getirdiğinde tepki vermek üzere tasarlanmıştır. Etkisi, bir aslan resmi ile değiştirilen bir köpeğin resmiyle veya bir imge yerine geçerken değişen bir kelimenin rengi kadar ince dramatik olabilir. Her iki durumda da, Dreamweaver, rollover efekti uygulamak için en kolay davranışlardan birini oluşturan, rollover'lar için özel bir iletişim kutusu içerir.
Dreamweaver'ın Görüntü Döndürme Ekle iletişim kutusunu kullanarak bir rollover görüntüsü oluşturmak için şu adımları izleyin:
1. İmlecinizi, rollover'ın görünmesini istediğiniz sayfaya yerleştirmek için tıklayın.
Rollover efektleri en az iki görüntü gerektirir: birincil durum için diğeri aktarma durumu. İki farklı resim veya iki benzer resim kullanabilirsiniz, ancak ikisi de aynı boyutlara sahip olmalıdır. Aksi takdirde, bazı garip ölçeklendirme efektleri elde edersiniz, çünkü her iki resim de sayfada tam olarak aynı boşlukta görüntülenmelidir.
2. Ekle -> Görüntü Nesneleri -> Rollover Resmi seçin.
Rollover Resmi Ekle iletişim kutusu görüntülenir.
3. Resim Adı kutusuna resminizi adlandırın.
Bir öğeye, örneğin bir resim uygulayabilmeniz için, öğenin bir ad olması gerekir, böylece davranış komut dosyası ona referans verebilir. Boşluklar veya özel karakterler kullanmadığınız sürece, elemanları istediğiniz gibi adlandırabilirsiniz.
4. Orijinal Görüntü kutusuna görünmesini istediğiniz ilk resmi belirtin. Görüntüyü bulmak ve seçmek için Gözat düğmesini kullanın.
Resimler sitenizin kök klasöründe değilse, rollover oluşturduğunuzda Dreamweaver bunları sitenize kopyalar.
5. Rollover Görüntüsü kutusuna ziyaretçilerin imleclerini ilk resimden hareket ettirdiklerinde görünür hale getirmek istediğiniz resmi girin.
Yine, görüntüyü bulmak ve seçmek için Göz At düğmesini kullanabilirsiniz.
6. Sayfa ilk yüklendiğinde tüm rollover görüntülerini tarayıcının önbelleğine yüklemek için Rollover Resim Önceden Yükle onay kutusunu seçin.
Bu adımı seçmezseniz ziyaretçileriniz bir gecikme yaşayabilir, çünkü ikinci görüntü fare orijinal resimden silinene kadar indirilmez.
7. Tıklandığında, URL'ye Git kutusuna herhangi bir Web adresi girin veya sitenize bağlanmak istediğiniz başka bir sayfayı bulmak için göz atın.
Bir URL belirtmezseniz, Dreamweaver otomatik olarak # işaretini yer tutucu olarak ekler.
8. Tamam'ı tıklayın.
Resimler otomatik olarak bir rollover olarak ayarlanır.
9. Çalışmalarınızı bir tarayıcıda önizlemek ve rollover'ın nasıl çalıştığını test etmek için çalışma alanının üst kısmındaki dünya simgesini tıklayın.
