Tasarladığımız web sayfaları ve sitelerinde çoğunlukla resim değişim efektleri (image rollover) kullanırız. Bu efekti gerek Javascript yardımıyla gerekse de Xhtml ve Css bileşimiyle rahatlıkla web sayfalarımızda uygulayabiliriz. Bahsettiğimiz özellikte fare ile resmimizin üzerine gelindiğinde yine aynı boyutta başka bir resim ile resmimizin yer değiştirdiğini görürürüz. Bu yazımızda sizlere kısaca bu işi Adobe Dreamweaver ile nasıl yapacağımızı anlatacağız. Böylelikle çok kolay ve zahmetsiz bir biçimde sayfalarımıza image rollover efekti ekleyebileceğiz. Ayrıca bu teknik ile yapmış olduğumuz işlemde geçerli (valid) bir kod elde etmiş olacağız.
Yazının Devamını Göster ▼
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…
Çok sağol Volkan abi,aradığımı yine burada buldum ;)
Ne demek Denizcim, yararlı olduysa ne mutlu bana…
bizim logo vardı:)unutulduk galiba:P
ben bir kere bunu bir web sitesi aracılığı ile yapmaya çalışmıştım olmamıştı site sadece bu amaç için hazırlanmıştı ama sonra olmadı her ne ise , şimdide kendim bakarken bir an gif yapımı gibi sandım ama sonradan bakınca normalde duruyor sabit üzerine gelince değişiyor, güzel ileride işime yarayacagını düşünüyorum.
dönemin css teknolojisi ile yapilabilecek bir seyi javascript’e birakmak olmaz :) .. bir an önce
a{position: absolute; width:[imaj genisligi, px. hesabi ile]; height: [imaj yüksekligi, px. hesabi]; text-align: -10000000px; background: url(resim.gif) no-repeat}
a:hover{background: url(resim2.gif) no-repeat}
bu kadar basit :) ancak unutmayin, div icine almazsaniz sayfanin tamamini göcürür, yani yerinde durmaz bu :P
@fikirbozan, kardeşim senin logonu hazırlayacağım gün acil bir sebepten dolayı Ankara’ya gitmek zorunda kaldım. Senin için hazırlamış olduğum PSD Dosyası hala duruyor, en kısa zamanda sana hazırladığım bir iki çalışmayı göndereceğim.
@amarat, umarım bu makalede anlatılan şey işine yarar. Çünkü çok basit ve her zaman kullanılabilecek bir teknik bu. İlgin için teşekkür ederim.
@emexci, aslında Css gibi bir totem dururken bu işi Js yardımıyla yapmak bana da pek cazip gelmiyor. Ancak yeterli düzeyde Css bilgisi olmayan ve WSIWYG tarzı web editörlerine hakim kişiler için ideal olabilir diye düşünmüştüm. Bu arada verdiğin kodları incelediğimde bu kodun çalışmayacağını düşündüm, çünkü herhangi bir div sınıfına bağlanmamıştı ama sen yorumunun sonunda div içine almak gerektiğini söylemişsin. Teşekkür ederim. Kodlarda biraz daha kısaltma yapılabilir aslında. Ben genellikle bu tarz bir işlem yapacaksam mutlaka bir div sınıfı içinde img a ve img a:hover parametrelerini kullanıyorum. Çok kısa ve bir o kadar etkili bir yöntem oluyor. Belki başka bir yazımı bu konu üzerinde yoğunlaşarak yazabilirim. İlginden ötürü teşekkür ediyorum.
ben teknoloji tasarım dersini çok seviyorum çünkü teknolojitasarım için yaptıgım resim çok güzel oldu ve ögretmenim benimkini çok begendigini söyledi ve okulumuzun panosuna asçagını söyledi. benim adım rümeysa msn adresim *******@hotmail.com beni eklemenizi isterim by
rumeysa hnm hawalara girme hemen bende çok sewiyorum teknoloji tasarım dersini.Hem teknoloji tasarım öğretmenimiz herşeyi çok güzel yapıyosun sen yardımcı olurmusun dedi bana bende kabul ettim…:D
Rumeysa ve Akıllı, bir atışma mı seziyorum burda yoksa bana mı öyle geliyor? Sanırım ya dersi ya da dersin hocasını paylaşamıyorsunuz. :)
daha güzel tasarımlar gönderirseniz daha iyi olacak
özelliklede yapılabilecek tasarımlar gönderin
LÜTFEN!!!!