Web 2.0 modasında ki resim yansıtma olayını artık ajax ile yapabilirsiniz. Genelde photoshop vb. programlarla yaparız bunu fakat her resime bunu uygulayamayacağımız büyük portal projelerinde ajax imdadımıza yetişti.

Mesela bir haber sitesi düşünün. Son eklenen haberlerin resimlerinin altına yansımalarını koyarak ne kadar modern bir görüntü oluşturursunuz değil mi ? Bunu derken benim aklıma başka başka çok şahane fikirler geldi ama artık herkez kendi yapıcılığını kullansın

Hemen geçelim bu ajax uygulamasını nasıl yapacağımıza…

Öncelikle bu ajax uygulaması için hazırlanmış 177 satırlık reflection.js kütüphanemizi şuradan indirelim.

Sonrasında HTML sayfanızın bulunduğu klasör’e zip’li klasörün içerisinden çıkaracağımız reflection.js dosyasını koyun.

HTML sayfanızın tagları arasına şu kodu yapıştırarak kütüphanemizi çağıralım.

<script type="text/javascript" src="reflection.js" mce_src="reflection.js"></script>

Örnek olarak bir resim seçin. Mesela adı resim.jpg olsun. Bu resmi sayfaya şu kodlarla yerleştirirsiniz;

<img src="resim.jpg" />

bu resimde yansıma efektimizi etkileştirmek için kodumuza birde class=”reflect” ekliyoruz.

<img src="resim.jpg" class="reflect" />

Eğer yansıma kısa gözüküyorsa kodu şöyle yazabilirsiniz;

<img src="resim.jpg" class="reflect rheight20" />

Eklediğimiz rheight20 kodu, yansıma resmimizi asıl resmin %20’si büyüklüğünde ayarlar. Bunu rheight50 yaparsanız %50 olur ve 10, 20, 30, 40, 50, 60, 70, 80, 90 ölçülerinden istediğiniz birinde yapabilirsiniz.

Kolay gelsin cemaat-i müslim…