DreamWeaver CS6'da Rollover image ve Swap image Kavramı

Bu dersimizde DreamWeaver CS6'da Rollover image ve Swap image Kavramını ele alalım.

Herkese merhaba. Bu dersimizde Rollover image ve Swap image konularını işleyeceğiz. Önce Rollover'dan başlayalım. Rollover kavramı basit olarak mouse ile bir resmin üzerine gelindiğinde başka bir resmin görüntülenmesi olayıdır. Yapacağımız çalışmada vizyondaki filmlerin isimleri alt alta yazacak ve filmin isminin üzerine mouse ile gelindiğinde hem filmin isminin şekli hem de üst taraftaki resim değişecek.

Öncelikle ekranda gösterildiği Siteleri Yönet(Manage sites) kısmından yeni bir site ekleriz.



Gelişmiş Ayarlar kısmından sitenin bulunduğu klasör içerisinde resimlerimizin tutulacağı images klasörü oluştururuz.



Yeni bir html dosyası oluşturup bu klasörün içerisine kaydederiz. Projemizde kullanacağımız resimleri images klasörüne ekledikten sonra çalışmamıza başlayabiliriz.

İlk önce 1 satır 1 sütuna sahip 200 pixel genişliğinde bir tablo ekledik. Onun içerisine de 12 satır 3 sütuna sahip genişliği 100 percent olan bir tablo daha ekledik ve başlangıç resmimizi tablomuzun içerisine atadık:



Daha sonrasında Ekle menüsü-> Görüntü Nesneleri -> Rollover görüntüsünü seçeriz:



Ekranda görüldüğü gibi orjinal görüntüyü ve mouse ile üzerine gelindiğinde gösterilecek rollover görüntüsünü seçeriz. Bunu bütün film adları için yaptıktan sonra artık rollover imagelerimiz hazır.



Şimdi de swap image konusuna geçelim.
Film adlarının üzerine gelindiğinde üst taraftaki resmimiz değişecek. Öncelikle başlangıç resmimizin üzerine gelip özellikler kısmından id tanımlarız. (imgMain) Sonrasında film adımızın üzerine gelip "" tagını seçeriz. Davranışlar(Behaviors) bölümünden "Görüntüyü değiştir" seçeneğine gelip ekrana gelen pencereden görüntü olarak imgMain ögesini ve değişecek resmimizi(kaynağı) seçeriz:



Bu işlemi diğer film adları için de yaptıktan sonra göreceğimiz gibi film adının üzerine gelindiğinde film adımızın şekli değişir(rollover) ve aynı zamanda filmin resmi de değişir(swap). Mouse film adının üzerinden alındığında ise başlangıç resmi görüntülenir. Projemizin son hali:



Kolay gelsin.

  • Etiketler;
Yorum Yaz

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

Yukarı Git