SWAP İMAGE

Swap image yöntemi web sitelerinde sıklıkla karşımıza çıkan bir davranış olayıdır. Resimlere ve divlere uygulanır. Kullanımı oldukça basittir ve yapısında Script kodları dolayısyla Mause olayları barındırır.

Hürriyet gazetesinin anasayfasındaki uygulamayı örnek göstermek gerekirse

Buradaki örneğe benzer bir çalışmayı Swap-İmage ile oluşturacağız.
Yapacağımız uygulama için öncelikle div yöntemi ile şablonumuzu 620*360 px ebatlarında hazırlıyoruz
Daha sonra bu alanımız iki parçaya bölerek değişicek resimlerin yerini-USTDİV-(620*324) ve Mause olayını kazandıracağımız resim alanlarını-ALT DIV-(620*35) ayarlıyoruz.

Şablonumuzu ayarladıktan sonra ust div alanına sayfada görüntülenecek ilk resmimizi yerleştiriyoruz. Ardından alt div alanına küçük resimlerimizi yan yana ekliyoruz ve css yardımıyla her bir resimin sağına 2px lik boşluk bırakarak birbirinden ayırıyoruz.

Burada dikkat ettemiz gereken olay swap image yöntemi resimlere etki edeceğinden ve sayfamızda alakalı ya da alakasız birden fazla resim olacağından resim değişikliği olacak alandaki büyük resmimiz için ID tanımlaması yapılır. Nedeni swap image komutunda sayfamızdaki bütün resimler listeleneceğinden, değişecek resmimizi kolaylıkla bulabilmemizdir. İlgili resime ID atamasını resmi seçtiğimizde Propertis araç çubuğunda ID kısmına isim belirtebiliriz("degisecek")

Resimlerimizi ayarladıktan sonra mause olaylarını ekleyebiliriz. Davranış olaylarımızı düzenleyebilmemiz için davranışı kazandıracağımız 1. küçük resmi seçerek Window-Tag İnspector kısayolu takip edilir. Sol panale açılan penreden Behaviors seçilerek + ile swap-image kısayolu belirtilir.

Burada açılan pencereden ID ismi verdiğimiz resim bulunur(degisecek) ve "Set source to" kısmında ise yerine gelicek olan diğer büyük resim seçilir.(1. büyük resim için yine aynı resim gelir.)... aynı işlemi diğer küçük resimler için gerçekleştirebiliriz.

Murat Aksel AKÇAY | 06 / 01 / 2015