Javascript, haberleri resimle gösterme

25 / Mart / 2008 Author

İsa Engiz

javascript Tags

javascript Yorumlar

9 Yorum Yapilmis.

Günümüzde popüler haber sitelerini gezerken hepimiz görüyoruz, haberler ana sayfada bol resimlerle sunuluyor. Bu şekilde haberler verilirken resimler sizin isteğinize göre gösteriliyor. Örnek olarak hürriyetin sitesini verebiliriz, birden yediye kadar olan numaraların her hangi birisinin üzerine geldiğinizde ilgili haberin resmi çıkıyor.

Javascript, haberleri resimle gösterme, image

Bu uygulamamızda biz de buna benzer bir şey yapacağız. Sıra numarasının üzerine gelince ilgili haber gözükecek. Uygulamamızın canlı örneğine buradan göz atabilirsiniz. İsterseniz dosyaları buradan indirebilirsiniz.

Anasayfa

Anasayfamızın iskeleti şu şekilde olmakta:

<div id="cerceve">
<div id="baslik">
</div>
<div id="resimler">
</div>
<div id="yazi">
</div>
</div>

Bu kadar basit, başlık kısmının içerisine başlığımızı yazıyoruz, resimler kısımının içerisinde resimlerimiz ve sayı listemiz bulunacak, yazı kısmının içerisinde ise habere ait yazı görüntülenecek.

Resimler bölümünde resimleri şu şekilde yazıyoruz:

<img id="1" src="resimler/1.jpg" style="display: block;" />
<img id="2" src="resimler/2.jpg" style="display: none;" />
<img id="3" src="resimler/3.jpg" style="display: none;" />
<img id="4" src="resimler/4.jpg" style="display: none;" />
<img id="5" src="resimler/5.gif" style="display: none;" />
<img id="6" src="resimler/6.jpg" style="display: none;" />
<img id="7" src="resimler/7.jpg" style="display:none;" />

Sadece birinci resmin görüntülenmesini sağlıyoruz. Diğerleri ise doküman tarayıcıya ulaştığında kullanıcının bilgisayarına yüklenmesine rağmen görüntülenmiyorlar, böylece o resmin görüntülenmesi gerektiğinde baştan yüklenmesine gerek kalmıyor.

Reimlerin altında listemiz var:

<ul>
<li><a class="link" href="#" onmouseover="habergoster(1)">1</a></li>
<li><a class="link" href="#" onmouseover="habergoster(2)">2</a></li>
<li><a class="link" href="#" onmouseover="habergoster(3)">3</a></li>
<li><a class="link" href="#" onmouseover="habergoster(4)">4</a></li>
<li><a class="link" href="#" onmouseover="habergoster(5)">5</a></li>
<li><a class="link" href="#" onmouseover="habergoster(6)">6</a></li>
<li><a class="link" href="#" onmouseover="habergoster(7)">7</a></li>
</ul>

Her bağlantıya bir olay ve bu olaya bağlı javascript fonksiyonu ekliyoruz. habergoster() fonksiyonu kendisine iletilen haberin gosterilmesini sağlayacak fonksiyon.

Javascript

Javascript kısmında tüm olayı halleden tek bir fonksiyonumuz var, habergoster():

function habergoster(no)
{
	for(i=1; i<8; i++)
	{
		if (i != no)
		{
			document.getElementById(i).style.display = "none";
		}
	}
 
	document.getElementById(no).style.display = "block";
	if (no == 1)
	{
		icerik = yazi1;
	}
	else if (no == 2)
	{
		icerik = yazi2;
	}
	else if (no == 3)
	{
		icerik = yazi3;
	}
	else if (no == 4)
	{
		icerik = yazi4;
	}
	else if (no == 5)
	{
		icerik = yazi5;
	}
	else if (no == 6)
	{
		icerik = yazi6;
	}
	else if (no == 7)
	{
		icerik = yazi7;
	}
	document.getElementById("yazi").innerHTML = icerik;
}

Aldığı tek değer, hangi haberin gösterileceğine dair “no” değişkeni. Bu değeri alır almaz ilk yaptığı diğer tüm resimleri görünmez hale getirmek:

for(i=1; i<8; i++)
{
	if (i != no)
	{
		document.getElementById(i).style.display = "none";
	}
}

Ardından yaptığı ikinci iş ise “no” id’sine sahip resmi görünür hale getirmek:

document.getElementById(no).style.display = "block";

Bu fonksiyonun yaptğı üçüncü iş ise sağ taraftaki yazıyı, habere göre değiştirmek, bunu da şu şekilde yapıyor:

document.getElementById("yazi").innerHTML = icerik;

icerik değişkeninin değerini, “yazi” id’sine sahip div etiketinin içerisine ekliyor. Bundan önce yaptığı ise “no” değişkenine göre “icerik” değişkeninin içeriğini oluşturmak. Bunu da if deyimiyle gerçekleştiriyor, haber no 1 ise, 1. yazı, 2 ise 2 yazı… gibi.

Sonuç

Görüldüğü üzere pek de zor değil haber sitelerindeki gibi fare hareketi ile içeriğin değişmesini sağlamak. Üstelik biz Hürriyet’in de aksine yazının da değişmesini sağladık! Bunun dışında görünümü ayarlayan CSS dosyamız var, o da çok karışık değil. Dosyaları indirip inceleyebilirsiniz.

Burada adı geçen iki javascript tekniği hakkında bilgi almak için şu yazılara göz atabilirsiniz:
Javascript ile “display:none / block”
innerHTML ile Dinamik Olarak İçerik Eklemek

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!