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.
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.
Uyarı Sev.
Mesaj Sayısı
Paylasım Gücü
Rep Point
Kayıt tarihi
Yaşım
Nerden
Ruh
Grafik Düzey
Tarayıcın