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

Rollover resimlerin de temelini oluşturan bu “Swap Image” kavramına biraz daha yakından değineceğiz.

Dokümanlar Ana Sayfası / Dreamweaver / Dreamweaver 8

Bu doküman toplam 2 sayfadan oluşmaktadır. Gösterilen 1/2 İlk sayfadasınız

Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image" isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz.

Bu makalede yapacağımız örneğin son halini görmek için buraya, Photoshop dosyasının da dahil olduğu tüm uygulamayı indirmek için buraya tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim.

Önce materyalleri hazırlayalım

İşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım

Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip "Save" düğmesine bastım.

File / Save for web menüsünden çalışmamızı kaydediyoruz

Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini seçip tüm dilimleri (All slices) kaydettim.

Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve "images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını hazırlayarak konuyu takip edebilirsiniz.

Çalışmamızı Dreamweaver içerisine aktardık

Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala / Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.

Eğer tabloyu kopyaladığınız yeni sayfada dilimler arasında boşluklar olursa yeni bir stil yaratıp border, padding, magrin değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1 piksel olarak atayın ve bu stili tabloya uygulayın. Böylece genişlemeleri önlemiş olacaksınız.

Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:

.TabloIcinStil{
font-size: 1px;
line-height: 1px;
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: 0px;
}
 

Neyse işin hazırlık kısmı bu şekilde sizde kendi uygulamalarınızı yapıp bu aşamaya geldiyseniz şimdi asıl konumuza dönelim.

Bu doküman toplam 2 sayfadan oluşmaktadır. Gösterilen 1/2 İlk sayfadasınız

Yorumlar

Yorum 10 Haziran 2007 Pazar 00:01:07 | Yazan: erniko

Peki ben bunu bir yazının üzerine geldiğinde aynı kutucukta resimlerin değişmesini istiyorum.Yani haber sitelerindeki gibi.Mesela haber7.com birde resimin üzerindeki açıklamalarda değişiyor.Bana yardımcı olurmusunuz??

Yorum 21 Haziran 2007 Perşembe 14:48:09 | Yazan: denizege

oylama olarak denediğimde yıldızları onayladıktan sonra o şekilde kalmasını nasıl sağlayabilirim?

Yorum 22 Haziran 2007 Cuma 15:38:41 | Yazan: Orhan

bir swap image davranışı (behavior) daha ekleyeceksin fakat bu sefer onmouseover değil onclick de olay olacak ve tıklandığı anda hangi resimlerin değişmesini istiyorsan onları ayarlamalısın.

Yorum 05 Mayıs 2008 Pazartesi 12:49:20 | Yazan: ncynet

Resimlerin üzerine konulan ID konusunda sıkıntı yaşıyorum.Tabloda birinci resim duruyorken diğer resimlere nasıl ID koyacam diye çocuk gibi çırpınıyorum.

Yorum 18 Mayıs 2008 Pazar 20:19:40 | Yazan: SniperScope

bu calisma icrisinde yer alan contact.gif, about.gif nereden geldi?

Yorum 08 Mayıs 2009 Cuma 19:56:34 | Yazan: alpen

sayin firik,
temiz annatim biciminiz ve amaci olan dersleriniz icin once tesekkur ederim ama ben vermis oldugunuz yolu eksiksiz yapmama ragmen henuz amacima ulasamadim:-))

Toplam 6 adet yorum mevcut « - 1 - »

Yorum ekleyebilmek için öncelikle üye girişi yapmanız gerekmektedir

Son eklenenler

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

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

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

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

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

Makale içeriği

Giriş
Resim Değiştirmece (Swap Image)

Yazan

	Orhan Veli Firik
	Orhan
	Eklenme tarihi
	13 Haziran 2007 Çarşamba 12:17:36
	Puan ver
	Ortalama: 4.83

Üye girişi

Üye ol Üye olmak istiyorum

Parolamı unuttum Şifremi hatırlamıyorum

Üyelik aktivasyon

Eklentiler (extensions)

Sitemizden indirdiğiniz eklentileri nasıl yükleyeceğinizi ve kullanacağınızı bilmiyorsanız bu makaleden başlayabilirsiniz. Genel olarak Dreamweaver eklentileri üzerine kısa bir yazı buyrun...