Bu işe başlamadan önce aynı boyutta 2 adet farklı resminiz olması gerekiyor. Ben küçük boyutlarda 2 adet resmi bu iş için tasarladım ve jpg formatında kaydettim. Bu resimleri bir klasöre attıktan sonra Adobe (daha doğrusu hala bizdeki formatıyla Macromedia) Dreamweaver’ı açıyoruz. Yeni bir HTML dosya açtıktan sonra yapacağımız işlem gayet kolay. Dreamweaver’ın yukarıda yer alan ana menüsünden Common bölümünde Image alanına geliyoruz, bu alanda yer alan Rollover Image bölümüne tıklıyoruz. Açılan pencerede bizden iki adet resim belirlememiz istenecektir. Bu alanda hemen birinci (üst) alana önce görünecek olan resmimizi belirtiyoruz. Ben iki resmimi klasör içine koydum ve resim1.jpg ve resim2.jpg olarak isimler verdim. Dolayısıyla hemen resim1.jpg dosyamı seçiyorum. Aşağıda yer alan bölümde ise resim2.jpg dosyamı seçereki açılan pencereye OK diyerek kapatıyorum. Artık rollover image efektim hazır. Hemen çalışmamızı kaydederek sonucu görebilir veya kısayol F12′ye basarak bir tarayıcı penceresinde sonucu görebiliriz.

Kaydettiğiniz sayfada rollover efektinin gayet güzel işlediğini göreceksiniz. Bu işlemi yapan bir dizi Js kodunu Dreamweaver sitenizin kaynak kodlarına (HEAD alanına) ekliyor. Daha sonra BODY etiketinde eklemiş olduğunuz resimler onload parametresi yardımıyla öncelikli olarak yükleniyor. Resim değişim özelliğinin görünmesi içinse a etiketinin onmouseover ve onmouseout parametreleri kullanılarak Javascript kodlarına atıfta bulunuluyor ve resim değişim efektimiz gösteriliyor. Bu özellikte resmin hem link olarak bağlanması hem de istenilen yerde kullanılabilmesi büyük bir avantaj. Böylelikle biraz Photoshop ve biraz da Dreamweaver bilgisi ile kendi istediğimiz tarzda Navigasyon menüler yapabilir ve bunları sitemizde kullanabiliriz. Ancak yazımızın başlarında belirttiğim gibi resimlerin aynı boyutta olması gerekli. Bununla birlikte yaptığımız çalışmanın geçerli bir uygulama olması için img etiketine alt=”" kodunun kesinlikle eklenmesi gerekiyor. Dreamweaver’da yeni bir HTML doküman açarken dosya tipininde Xhtml olmasına dikkat ediniz. Bu sayede programın ürettiği kodlar Xhtml ile uyumlu kodlar olacaktır.

Örnek çalışmam için lütfen buraya tıklayınız…