Dreamweaver Swap Image

Bu dersimizde swap image konusunu ele alıyoruz.

Bu dersimizde swap image konusunu ele alıyoruz.

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

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.

Dersimiz bitti. İnşallah faydalı bir ders olmuştur.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Hangi aşamada hata alıyorsun?
dostum id vermek dediğin nedemek ya onu bir açıklarsan?? nasıl yapıyoruz o işi?
antihedon: "id" demek bir insanın t.c. kimlik numarası gibi birşeydir. id şu şekilde verilir; örnek olarak ilk olarak bir div oluşturalarım. <div></div> bu divimize id vermek için <div id="divadi"></div> olarak veriyoruz. a_tekiner41: eğer dreamweaver'da div layer oluşturmak istiyorsan <div></div> yazman yetelidir. Ancak eğer sen bunu nasıl dreamweaver'da yaparım diyorsan bunun şu an söyleyemeceğim. Çünkü kendi bilgisayarımda değilim ve burada dreamweaver yüklü değil.
çok akıcı olmuş...
layer nasıl veriliyo orda takıldım
çok saol dostum taktir ettim
Güzel anlatmışsın emeğe sağlık.
arkadaşlar konu başlıklarıyla ilgili örmek uygulamalar koymak zahmetli ama daha anlaşılır kılacak bu dersleri bence."swap image" nin ne olduğunu bilemeyecek seviyedeki arkadaşları (benim gibi) da düşünmek gerekir bence
Arkadaşlar önemli konulara değinmişsiniz.Teşekkürler,çok faydalı bilgiler edindim.Yalnız div tagları ile doyurucu bilgi yok sanırım.Sitemi divlerle yapmak istiyorum.Fakat 2 veya 3 tane div yanyana nasıl getirilir.Bunu yapmadım.Açıklarsanız memnun olurum.Selamlar
BU ÖZELLİLİÃİ LİNK İLE KULLANABİLİYORMUYUZ YA DA ŞÖYLE SORAYIM HANİ GÜNLÜK HABER SİTELEİNDE YAZININ ÜZERİNE GELİNCE HABERE AİT RESİM GELİYOR YA OŞEKİLDE OLABİLİYOR MU?
yan yana konulabiliyormu ?:-dusun:

Yukarı Git