Blogger için Rastgele Resim

   Yabancı bir sitede gezerken, yan tarafta duran ve her sayfa yenilenmesinde değişen bir resim gördüm. Blogger için sidebar'da güzel duracağını düşünerek ve siteye dinamiklik katması açısından, JavaScript kullanan ve gadget ile eklenen bir script güzel olur diye düşündüm. (Aslında JavaScript'den çok iyi anlamıyorum fakat ActionScript geliştiricisi olarak bana çok basit geliyor, kodlar ve fonksiyonlar hemen hemen aynı)

   Yazılarımda bunlar kodlar, bunları kopyalayın şuraya yapıştırın anlatımından ziyade, kodlar ile ilgili açıklamalar sunmayı tercih ediyorum, burada anlatılan kodları özelleştirmeniz ve başka eklentilerde kullanmanız için önemli! (Anlatımlar size çok basit gelebilir farkındayım, ama unutmayın ki bu site her bilgi seviyesindeki kullacılar için oluşturuldu.)

Örnek(Denemek için sayfayı yenileyin.)

İster gadget olarak, isterseniz yazılarınızda kullanabilirsiniz.

Ben zaten bu konulara hakimim diyenler, kodlar için sayfanın aşağısına ilerlesin.

   Bu yazıyı okuduktan sonra, javascript fonksiyon oluşturma ve çağırma, dizi tanımlama, rastgele sayı üretme, ekrana yazma vb. kodları hakkında hafiften fikir sahibi olacaksınız.

Kodları yazmaya başlamadan önce kullanacağımız javascript kodları hakkında bilgilendirme;

• Javascript kodlarının sayfamızda kullanılması için script etiketi arasına alınması veya dışarıdan (external) bağlantı verilmesi gerekir. Bu yazıda <script language="JavaScript">...</script> etiketlerinin arasındaki kullanımını göreceksiniz.
• Basit anlamda fonksiyonlar belli kodlardan oluşan çalışmasını istediğimiz zaman çalışan kod gruplarıdır. Fonksiyon çağırmak/çalıştırmak için fonksiyonİsmi() yazılır.
• Diziler üzerinde bir veya daha fazla değişken tutan değişkenlerdir.
• Rastgele sayılar üretmek için Math.random() kodu kullanılır.
• Virgüllü sayıları yuvarlamak için Math.floor() kodu kullanılır.
• Ekrana belli bir metni veya yazıyı yazdırmak için document.write() kodu kullanılır.

Şimdi bir fonksiyon oluşturalım ve fonksiyon içerisinde resim yollarını barındıran bir dizi değişkeni tanımlayalım ve 4 tane değişken taşısın (bu değişkenler resim yolları olacak). Aynı fonksiyon içerisinde bana resim sayısı kadar (4 resim varsa 0-4 arasında) rastgele sayı üreten bir değişken daha olsun.

Başlayalım;

function resimOlustur(){
var resimler=new Array()
resimler[1] = "RESİM_YOLU1"
resimler[2] = "RESİM_YOLU2"
resimler[3] = "RESİM_YOLU3"
resimler[4] = "RESİM_YOLU4"
var rastgeleSayi = Math.floor(Math.random() * resimler.length)
}

   Yukarıdaki kodlarda resimler adında, array (dizi) türünde bir değişken tanımlandı ve üzerine 4 resim yolu atandı. "resimler.length" resimler dizisinde bulunan değişken sayısını belirten koddur. Üretmek istediğim sayı resim sayısı ile orantılı olarak değişecektir. Resimler dizisinde 10 değişken olsaydı bu sayıda 10 olurdu.

   Değişkenlerimiz tanımlandı. Rastgele sayı üreten değişkenimiz 0 üretebilir. resimler dizimizde 0 öğeli değişken boş durumda, bu nedenle rastgeleSayi 0 üretirse 1 olmasını sağlayalım. Küçük bir if sorgusu ile bu adımı bitirelim.

if(rastgeleSayi == 0)
rastgeleSayi = 1

   Buraya kadar bize lazım olan tüm değişken tanımlamalarını ve atamalarını hallettik. Bu aşamadan sonra resimi ekrana yazdırmak kaldı. "document.write()" parantez içerisinde kalan alana ekrana yazdırmak istediğimiz metni yazabiliriz. Aynı şekilde HTML etiketleri bu parantez içerisine yazılırsa yorumlanarak ekrana yazdırılır. Şimdi resmi ekrana yazdıralım.

document.write('<img src="'resimler[rastgeleSayi]'" width="134" height="193">')

   Aynı zamanda resimin eni (width) ve yüksekliği (height) tanımlamaları yapıldı. Sayfa her yenilemede rastgeleSayi yeni bir sayi üretecek ve resimler dizisinin o elemanı ekranda gözükecektir.

Kodların tamamlanmış hali;
Ben 4 tane film posteri linki üzerinden çalıştım.

<script language="JavaScript">
<!--
function resimOlustur(){
var resimler = new Array()
//İstediğiniz kadar resim linki ekleyebilirsiniz.
resimler[1] = "http://2.bp.blogspot.com/-LNzahbgxLYE/T0AC32vdknI/AAAAAAAAAQQ/LRCkPQdhklI/s1600/ghost_rider_2-2.jpg"
resimler[2] = "http://4.bp.blogspot.com/-1E50210PeQ8/T0ADOKasA9I/AAAAAAAAAWY/HVmVhurkhXI/s1600/romantics-anonymous-poster.jpg"
resimler[3] = "http://2.bp.blogspot.com/-qDfnWHIhPZs/T0ADVLg1xjI/AAAAAAAAAYQ/otDCUZsd9NE/s1600/thebournelegacy.jpg"
resimler[4] = "http://3.bp.blogspot.com/-OVjboZFUMnw/T0AC-gxAQ5I/AAAAAAAAASg/8liy3wyuikk/s1600/journey_2.jpg"
var rastgeleSayi = Math.floor(Math.random() * resimler.length)
if(rastgeleSayi == 0)
rastgeleSayi = 1
document.write('<center><img src="'+resimler[rastgeleSayi]+'" width="134" height="193"></center>')
}
//Fonksiyon çağırma/çalıştırma
resimOlustur()
//-->
</script>

Yukarıdaki kod grubunda dikkat ettiyseniz "<!--" ve " //-->" yorum etiketlerini kullandım. Bu etiket aynı zamanda eski tarayıcılardan(javascript desteklemeyen) kodları gizler...

Resimlere bağlantı vermek;

Rastgele resim bağlantılı; resimler dizisi adında resimlerin yollarını içeren bir dizi tanımlamıştık, aynı şekilde her resime tıklanıldığında açılmasını istediğimiz bağlantı yolu atanmalıdır.

var baglanti = new Array()
baglanti[1] = "http://www.google.com"
baglanti[2] = "http://www.google.com"
baglanti[3] = "http://www.google.com"
baglanti[4] = "http://www.google.com"

document.write ile <img> etiketi ekrana yazdırılmıştı;

document.write('<center><a href="'+baglanti[rastgeleSayi]+'" target="_blank"><img src="'+resimler[rastgeleSayi]+'" width="134" height="193"></a></center>')

olarak değiştirdiğimiz takdirde resime bağlantı verilmiş olur.

Rastgele resim bağlantılı (linkli) kodlar(Güncelleme: 03.03.2012);

<script language="JavaScript">
<!--
function resimOlustur(){
var resimler = new Array()
var baglanti = new Array()
//İstediğiniz kadar resim linki ekleyebilirsiniz.
resimler[1] = "http://2.bp.blogspot.com/-LNzahbgxLYE/T0AC32vdknI/AAAAAAAAAQQ/LRCkPQdhklI/s1600/ghost_rider_2-2.jpg"
baglanti[1] = "BURAYA 1. RESMİN BAĞLANTISI GELECEK"
resimler[2] = "http://4.bp.blogspot.com/-1E50210PeQ8/T0ADOKasA9I/AAAAAAAAAWY/HVmVhurkhXI/s1600/romantics-anonymous-poster.jpg"
baglanti[2] = "BURAYA 2. RESMİN BAĞLANTISI GELECEK"
resimler[3] = "http://2.bp.blogspot.com/-qDfnWHIhPZs/T0ADVLg1xjI/AAAAAAAAAYQ/otDCUZsd9NE/s1600/thebournelegacy.jpg"
baglanti[3] = "BURAYA 3. RESMİN BAĞLANTISI GELECEK"
resimler[4] = "http://3.bp.blogspot.com/-OVjboZFUMnw/T0AC-gxAQ5I/AAAAAAAAASg/8liy3wyuikk/s1600/journey_2.jpg"
baglanti[4] = "BURAYA 4. RESMİN BAĞLANTISI GELECEK"
var rastgeleSayi = Math.floor(Math.random() * resimler.length)
if(rastgeleSayi == 0)
rastgeleSayi = 1
document.write('<center><a href="'+baglanti[ratgeleSayi]+'" target="_blank"><img src="'+resimler[rastgeleSayi]+'" width="134" height="193"></a></center>')
}
//Fonksiyon çağırma/çalıştırma
resimOlustur()
//-->
</script>

<a> etiketinin target özelliği ile linkler yeni pencerede veya sekmede açılır...
YENİ PENCEREDE AÇILMASINI İSTEMİYORSANIZ target="_blank" ÖZELLİĞİNİ SİLİNİZ...


ÖNEMLİ!

• Yazılarınızda kullanmak için yukarıdaki kodları <div> </div> etiketleri arasına alın.
• Bu scripti Blogger sayfanıza gadget olarak eklemek için; Bloğunuz - Yerleşim - Gadget Ekle - HTML/Javascript yollarını takip ederek kodları yapıştırın veya yazın. Kaydet butonuna basın. Resim yollarını değiştirmeyi unutmayın.

Yorumlar üzerinden anlatım güncellenecektir.
İyi bloglamalar...

Kategori: Blogger