Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • June 5, 2009
  • Kategori:
  • Javascript/Ajax
  • Paylas:
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 [mcode]<head> .. </head>[/mcode] 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 [mcode]var xListesi[/mcode] yazan yerin karsisinda bulunan [mcode]new Array()[/mcode] 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.
Yorumlar
  • Eski Yorumlar:
  • zafer zent
  • saolun ayberk bey gercekten onemli bir konuya deginmisiniz.Fakat ben burda js baglantisini nasil yaptiniz onu anliyamadim usteki js yi alttaki html kodunda baglanitisini goremedim.
  • 2009-06-05 11:34:15
  • Ayberk Atasay
  • Sevgili zafer, Yorumun icin tesekkur ederim. Burdaki baglantiyi javascript kodunun altinda bulunan haberDegis fonksiyonu ve buna bagli katmanlarin(div) kimlikleri(id) belirliyor.
  • 2009-06-05 11:43:26
  • tayfun hakyemez
  • hocamm cok tesekkur ediyorum sayenizde cok sey ogreniyorumm... iyi calismalar
  • 2009-10-10 23:37:45
  • Abdurrahman CA?LAR
  • Sevgili Ayberk bey. ben bu manset sistemini asp ile dinamige baglamak istiyorum. nasil yapabilirim ??
  • 2011-02-08 15:36:33