Jquery – Çoklu Kapak Uygulaması

Hazırladığım sitelerden birisinde de kullanmayı amaçladığım bir çoklu kapak (multi cover) hakkında örnekleri araştırırken Hasan Yalçın ve Azer Koçulu’nun buradaki ve şuradaki makaleleri ile karşılaştım.  Hasan Yalçın’a katılmakla beraber ihtiyaç dahilinde kullanılması gerektiğini düşünüyorum.

Konuya girmeden önce Hasan Yalçın’ın açıklamasını yer vermek istiyorum.

Haber portalları tasarlanırken, güncel ve öncelikli haberin yani bilinen adı ile manşetin ön planda gözükmesi için bir alan, diğer gündemde olan ancak öncelik sırasını yitirmiş haberler içinde ayrı bir alan tasarlanması öngörülür. Bu alana da Cover denir.

Arama motorları ve forumlardaki ufak bir gezintiden sonra Azer Koçulu’nun buradaki uygulamasını inceleme fırsatı buldum. Uygulama hem tasarım hem standartlar hem de kod sadeliği açısından oldukça başarılı bir uygulama. Bu uygulamayı Jquery ile yeniden kodlayarak daha sade bir formata sokmaya çalıştım. Kullanan arkadaşlar yorumlarını, öneri ve eleştirilerini bırakırlarsa çok memnun olurum.

Adım adım ilerleyelim:

1. HTML

<div id="H_Basliklar">
<a href="Haber1.asp"
id="H_1" text="Burası H_1 adlı haber özetidir." photo="H_1.jpg"
onmouseover="ChangeNews('1')">Haber Başlık_1</a>

<a href="Haber2.asp"
id="H_2" text="Burası H_2 adlı haber özetidir." photo="H_2.jpg"
onmouseover="ChangeNews('2')">Haber Başlık_2</a>


</div>

<div id=”H_Detay”>
<div id=”H_Text”>…</div>
<div id=”H_Photo”><img src=”spacer.gif” /></div>
</div>

2. JqueryScript

function MultiNews(HaberId)
{
var strText=$("#H_"+HaberId).attr("text");
var strImg=$("#H_"+HaberId).attr("photo");
$("#H_Text").html(strText);
$("#H_Photo").attr({src:strImg});
}

Herkese iyi çalışmalar