• ana sayfa
• makaleler
• dosyalar
• forum
• kitaplar
• linkler

Dreamweaver ile Resim Değiştirmece (Swap Image)

Resim Değiştirmece (Swap Image)

Şimdi bu örnekteki tasarımımızda menü linkleri bulunmakta (Hakkımızda, Ürünlerimiz, Projelerimiz...). Resimdeki ilgili dilimleri seçip ilgili linkleri atıyoruz.

İlgili dilimi seçip Properties panelinden link atıyoruz

Bu şekilde tüm menü elemanlarına link atadıktan sonra resim değiştirme işlemine geçebiliriz. Şimdi burada yapacağımız örnekte menü elemanlarından birinin üzerine gittiğimizde ortadaki alan değişecek ve ilgili bölümün resmi çıkacak.

Burada yapmamız gereken ek bir işlem var oda değişimin yapılacağı resimlere birer ID atamaktır. Böylece hangi resmin ne zaman değişeceğini ID sini zikrederek belirtebileceğiz. Bunun için, DW'da resimlerin üzerine bir kez tıklayıp seçtikten sonra Properties panelindeki ID bölümüne resim ile ilgili bir ID girmeliyiz. ID girerken Türkçe karakter ve özel karakterler girmemeye ve "_ -" gibi ifadeler kullanmamaya özen göstermelisiniz.

Değişecek resimlere ID atıyoruz

Olaya dahil olacak bütün resimlere birer ID atadıktan sonra ortadaki resim olan ve değişecek resme de ID atmayı unutmadığımızdan emin olarak işleme devam edebiliriz.

Eğer açık değilse Window / Behaviors (Shift+F4) menüsü ile Behaviors panelini açıyoruz. Şimdi menü elemanlarından "Hakkımızda" linkinin üzerine bir kez tıklıyor ve seçiyoruz. Seçim işlemini "Tag selector" panelinden de yapabiliriz.

Seçim işlemini Tag selector panelinden de yapabiliriz.

Ardından Behaviors panelindeki artı işaretine (+) tıklayıp açılan menüden "Swap Image" seçeneğini seçiyoruz.

Behaviors panelinden Swap Image seçeneğine tıklıyoruz.

Açılan iletişim penceresinde doküman içerisindeki resimlerin listelendiğini göreceksiniz. Buradan "Hakkımızda" menü elemanının üzerine gelindiğinde değişecek kısımda çıkmasını istediğiniz resmi seçip "Set soruce to" bölümünde "Browse / Gözat" düğmesine tıklayıp ilgili resmi seçiyoruz.

Swap image iletişim penceresi

"Preload images" seçeneği doküman yüklenirken resimlerin arka fonda yüklenmesini ve linklerin üzerine gidildiğinde henüz yüklenmemiş resim olmamasını sağlayan bir seçenektir. "Restore images onMouseOut" seçeneği ise fare imlecinin resim üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. İlgili ayarları yapıp "OK" dediğinizde Behaviors panelde bu link için 2 olay (event) atandığını göreceksiniz. Bunlardan

• "onMosueOver" (fare imleci üzerine geldiğinde) olayına atanan "Swap image"; resim değiştirme işlemini yapan fonksiyonu çağır
• "onMouseOut" (fare imleci üzerinden gidince) "Swap image Restore"; tekrar eski resmin çıkmasını sağlayan fonksiyonu çağırır.

İşlem sonrası Behaviors panelin görünümü

Dokümanı kaydedip tarayıcı ile görüntülediğinizde ilgili link üzerine fare imleci ile gidildiğinde ortadaki resmin değiştiğini göreceksiniz.

Tüm linkler için bu işlemi tekrarlayarak değişmesini istediğiniz resimleri atayabilirsiniz. Çalışmanın son halini görmek için buraya tıklayınız. Bu örnekte sadece bir resmin değişmesini sağladık fakat aynı anda birkaç resmin değişmesini de sağlamak mümkündür. "Swap image" iletişim penceresinde listeden değişik resimler seçip teker teker "Set source to" ayarı yaparsanız aynı anda çoklu resim değişimi sağlayabilirsiniz. Örneğin sitemizde kullandığımız oylama sisteminde böyle çoklu bir resim değiştirme işlemi yapılmaktadır. Sizde bir örnek yaparak işleyişi daha iyi kavrayabilirsiniz.

Oylama sisteminde aynı anda 5 yıldız birden değişiyor

Son eklenenler

Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (72) - 31 Ağus 2010 Sal 01:06:40

Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (47) - 31 Ağus 2010 Sal 01:05:12

Bölüm 2 - Upload And Resize Image With Developer ... (45) - 31 Ağus 2010 Sal 01:03:46

Bölüm 1 - Tablosuz Tasarım ( Div ) (114) - 31 Ağus 2010 Sal 01:02:06

Adobe Developer Toolbox CS4 ve Duyuru Sayfası (40) - 31 Ağus 2010 Sal 00:59:19

ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam | iletişim | Prefabrik | oyun oyna | Borsa | canli imkb | mirc indir | Nakliyat ankara | ankara nakliyat | ankara web tasarım| imkb canli |

dw.gen.tr © 2010 Tüm hakları saklıdır ®