Dreamweaver_swap_lmage.htm
1- Yeni dökümanımızı açıyoruz.

2- İki adet layer oluşturalım. Birine kucukresimler birine de buyukresimler id ismini verelim.

3- Oluşturduğumuz layerlerimize stil uygulayalım. Ben Swap İmage kullanımını öğretmek için uzatmadan basit stiller vereceğim. "kucukresimler" layerimizin width değerini 150px, height değerini 200px yapalım. "kucukresimler" layerimizde küçük resim koyacağımız için width ve height değerini küçük verdik. "buyukresimler" layerimizin width değerini 400px, height değerini ise 350px verelim. Ayrıca iki layere de background-color verin. Ne, nerede görelim. Bu stilleri uygulamak için <head> taglarının arasına aşağıdaki kodları ekleyin.

 
<style type="text/css">
#kucukresimler {
	background-color:#666666;
	width:150px;
	height:200px;
	}
#buyukresimler {
	background-color:#CCCCCC;
	width:400px;
	height:350px;
	}
</style>



4- "kucukresimler" layerimizin için 150*200 boyutunda bir resim ekleyin ve resime id uygulayın. id uyguladığınızda gelecek kod:

 

<img src="araba2.gif" name="resimkucuk" 
width="150" height="150" id="resimkucuk" />



5- Şimdi bir de "buyukresimler" layerimizin için bir resim koyalım bunun boyutları layerimizin boyutlarına göre olsun ve buna da aynı işlemi yapalım. Yani resimin id sine resim verelim.

6- Şimdi sıra geldi Swap İmage' yi uygulamaya. Küçük resimimize tıklayalım yani seçelim. Tag İnspector panelinden(Sağ Tarafta) Behaviors kısmına gelin ve oradaki artı işaretine gelin. Burada bir menü açılacak, buradan Swap İmage' yi tıklayın.

http://www.sanalkurs.net/images/dersler/dwders1.jpg

Biz daha önce resimlerimizi eklediğimiz zaman o resimlere isim vermiştik. " resimkucuk" ve "buyukresim" diye. Tabii siz belki değişik isimler vermişisinizdir. Neyse... Yukarıda gördüğünüz "Images" kısmı resimin nerede değişeceğini belirtmek içindir. Burada "buyukresim" i seçersek küçük resimimn üzerine geldiğimiz zaman resim büyük resimin orada değişecektir. "buyukresim" i seçtikten sonra bir de resim seçmeniz gerekecektir.
 

Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol