JS Manset Sistemi
Haber siteleri basta olmak uzere blog sitelerinde de kullanilan, en son eklenen yada onemli olanlari diger iceriklerden farkli sekilde gorunmesini saglayan JavaScript uygulamasini ekliyorum.

Yerel bir gazete icin yapmis oldugum bir sitede kullandigim bu yontem hizli ve kolay degistirilebilir.

JavaScript Kodu
Asagidaki kodun <head> .. </head> etiketleri arasinda olmasi gerekiyor.
<script> 
var oncekiRes = 0;
var spotListesi = new Array(2);
var resimListesi = new Array(2);
var linkListesi = new Array(2);

spotListesi[1] = "ABT Blog Yayinda !";
resimListesi[1] = "abtblog.jpg";
linkListesi[1] = "abt-blog.html";

spotListesi[2] = "ASP, CSS, JS, AJAX ile ilgili makalelere devam.";
resimListesi[2] = "asp.jpg";
linkListesi[2] = "asp-css-js-ajax.html";

function haberDegis(id)
{
document.getElementById('rmanset_spot').innerHTML = spotListesi[id];
document.getElementById('baslik_img').src = resimListesi[id];
document.getElementById('baslik_link').href = linkListesi[id];
}
</script>

Burada bilinmesi gereken var xListesi yazan yerin karsisinda bulunan new Array() icinde bulunan sayilarin gosterilecek haber sayisi ile alakali olmasidir. Ben mansette 2 adet haber gosterilmesini istedigim icin 2 olarak belirledim. Bunun disinda habere/icerige ait spotListesi, resimListesi, linkListesi kimlik numaralarinin ayni olmasi gerekmektedir.

Manset resimlerinin, spot basliklarinin cikmasini istediginiz yere ise asagidaki kodlari duzenleyerek sitenize ekleyebilirsiniz.
<div id="rmanset"> 
<div class="rmanset_resim">
<a href="abt-blog.html" id="baslik_link"><img id="baslik_img" src="abtblog.jpg" border="0"></a>
</div>
<div id="rmanset_spot">ABT Blog Yayinda!</div>
<div id="rmanset_spot_resim">
<a href="abt-blog.html"><img border="0" src="abtblog.jpg" alt="" onMouseOver="return haberDegis(1)"/></a>
<a href="asp-css-js-ajax.html"><img border="0" src="asp.jpg" alt="" onMouseOver="return haberDegis(2)"/></a>
</div>
</div>


Eger siteye konulmasi sirasinda bir sorun yasarsaniz buradan yorum veya e-posta ile iletisim kurabilirsiniz.
June 5, 2009
Ayberk Atasay
Javascript/Ajax
4 yorum