Bundan Sonra Bu Sitedeyiz..

deutch | türkçe

Menü 1

By-Toxec En Kaliteli Platform http://www.mountainmissionchurch.com/Portals/7/Megaphone%20Smiley.gifDUYURULAR: TASARIMI DEĞİŞTİRDİK. | YENİ KONULAR EKLEDİK | LOGOMUZU FLASH LOGOYA ÇEVİRDİK | GOOGLE'DA İLK SIRADAYIZ TIKLA
 
 

Toxec Web

JAVASCRİPT KODLAR

 
Basit Javascript kodları ile resim galerisi yapımı
2008-06-13 19:35:31

  1014 Kez Görüntülendi
İNTERNET VE TASARIM

Sayfayı yenilemeden üzerinde işlem yapmak çoğu kişinin aklında ajax"olarak yer alır ancak xhr (xml http request) kullanmadan da birkaç farklı kod ile  hoş galeriler yapılabilir. Anlatımlı bir örnek yapacak olursak.

Sürekli aynı şeyleri yazmamak ve işlem kolaylığı sağlatmak amacı ile bir çok programlama dilinde fonksiyonlar kullanılır, biz de işimizi görecek iki fonksiyon tanımlayalım. Bu fonksiyonlar resmi göstermek ve gizlemek amaçlı kullanılsın. Ama bu fonksiyonlardan önce, resmi göstereceğimiz alan içinde bir id vererek bu alanı tanımlamalıyız.


<div id="resim_alani" style="display:none">Resim Bu alana gelecek</div>

Bunu div le yapabileceğimiz gibi, bildiğiniz tablolama ile de yapılabilir.




<table><tr><td id="resim_alani" style="display:none"> Resim Bu alana gelecek</td></tr></table>


Bu şekilde alanımızı tamamladığımıza göre artık yapacağımız şey fonksiyonumuzu tamamlamak.




<script>

function resimkapat() {

document.getElementById('resim_alani').style.display='none';

}

function resimgoster(resim) {

document.getElementById('resim_alani').innerHTML='<img src=" '+resim+'"><br><a href=#resim_alani onclick="return resimkapat()">Resmi Kapat</a>';

document.getElementById('resim_alani').style.display='';

}

</script>


Göründüğü gibi kodlar oldukça sade. Resim kapat fonksiyonu, resim_alani id li elementin, td veya div size kalmış, görünmemesini sağlıyor. Resimgoster ise, önce alanın içine resmi ekliyor ve bir link koyuyor, daha sonra da resim_alani id li elementi görünür hale getiriyor. Hepsi bu.  Resimlere de linkleri verirken şu şekilde vermeliyiz

<a href=#resim_alani onclick="return resimgoster('buyukresim.gif');">

<img src="kucukresim.gif"></a>


Tabi siz bunu veritabanı kullanarak da yapabilirsiniz yapacağınız işlem resim yollarını veritabanından çekmek olacak onu da ilerleyen günlerde anlatalım.. bu günlük bu kadar


DEMO için Tıklayınız

.....Bugün sitemize giren 1 ziyaretçiden birisiniz.....

Bannertakas.com Profesyonel Banner değişim ve takas sistemi
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=