Dreamweaver ve Rollover resimler ile çalışmak
Sayfanıza resimler ekleyerek canlılık kazandırmayı anlatmıştık. Fakat bir süre sonra bu durağan resimler bizleri daha farklı alternatifler bulmaya itecektir. İşte burada rollover image diye bir kavram çıkar karşımıza. Peki, nedir bu rollover image?
Çok resmi oldu biraz basitleştirirsek fareyle bir resmin veya linkin üzerine gittiğinizde başka bir resmin görünmesi olayıdır.Rollover kavramını bu şekilde açıkladıktan sonra bir örnekle olayı pekiştirelim, bir rollover resim eklemek için;
Yeni bir doküman açın bunu kaydedin. Arkasından bu dokümanı kaydettiğiniz dizinle aynı dizine ya da alt dizinlerinden birine (images/ klasörü olabilir mesela) kullanacağınız rollover image için gerekli resim dosyalarını kaydetmelisiniz. İki adet resim dosyasına ihtiyacımız var; Orginal image ve rollover image.
Resim dosyalarımızı hazırladıktan sonra rollover image operasyonuna başlayabiliriz;
Insert panelden "Common" sekmesi altında yer alan Image düğmesinin bir alt düğmesi olan Rollover image düğmesine yada Insert / Image Object / Rollover image menüsü ile Rollover image iletişim penceresini açıyoruz.
Insert Panelden Rollover Image düğmesine tıklıyoruz
Şimdi ayarları yapmaya başlıyoruz, sırasıyla;
Insert Rollover Image iletişim penceresi
- İmage Name: Rollover image objesine bir isim vermek zorundayız. Buna spesifik bir isim verebilirsiniz fakat çok da önemli değil DW bizim için zaten bir isim vermiş. Eğer sayfa içerisinde çok fazla rollover resim kullandıysanız anlamlı isimler kullanmak işleri kolaylaştırabilir.
- Orginal image: Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz. Bu resim linkimizin asıl resmini teşkil ediyor. Yani, fare imleci linkin üzerinde değilken görünecek resim.
- Rollover image: Bu ise fare imleci linkin üzerine gittiğinde görünecek resmi ifade ediyor.
- Preload Rollover image: Rollover resimlerin yüklenmesi uzun sürebilir ve bu süre zarfında ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak rollover image arka planda yükleninceye kadar, orginal image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun ortadan kalkmış olur.
- Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen yazı, açıklama vs...
- When Clicked Goto URL: Eğer rollover resmimize link vermek istiyorsak buraya ilgili dosyanın adresini yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.
Tüm ayarları uygun şekilde yaptıktan sonra OK diyip rollover resmimizi sayfamıza dâhil edebiliriz. Rollover resimler DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test edebilirsiniz.
Örnek bir rollover image çalışmasının görünümü
Kaynak www.dw.gen.tr/
