Java Script ile haber sitelerindeki gibi manşet sistemi yapmak ve css ile biçimlendirmek
Merhaba ;
Bu yazımda web yazılımına yeni başlayan bir çok kişinin forumlarda sorduğu bir konuyu ele alıyorum. Hemen hemen tüm haber sitelerinde ya da gazetelerin internet sitelerinde bulunan manşet haber uygulamasını inceleyip basit bir örnek uygulama yapıyor olacağız. Öncelikle işin mantığından bahsetmek gerekirse. Olay tamamen sayfada yer alan resimlerin ve yazıların görünür ya da görünmez hale getirilmesinden ibaret.. Başka bir değişle html elemanlarının Display özelliklerinin none( görünmez) ya da block (görünür) yapılmasından ibarettir.
Şimdi zaman kaybetmeden örnek uygulamamıza geçelim. Senaryo gereği yapacağımız sitede vizyondaki filmleri ana sayafmızda manşet şeklinde göstermek isteyelim, sağ tarafda vizyondaki son 5 filmin adı olsun solda ise bu filmlere ayit poster görüntüleri olsun. fare ile hangi filmin üstüne gelirsek yandaki resimde o filimn posteri gelsin ve film isimlerinin altında da o filme ayit kısa bir açıklama çıksın. Önce html sayfamızın kodlarını aşağıdaki gibi oluşturalım.
haber_manset.html
<div id="genel" >
<table align="center" cellpadding="10" cellspacing="0"
style="width: 462px; height: 524px;" border="0">
<tr>
<td id="resimler" valign="top" >
<div id="div1" style="display:block">
<img id="res1" alt="" src="IMG/soysuzlar_cetesi.jpg" />
</div>
<div id="div2" style="display:none">
<img alt="" src="IMG/evdeki_dusman.jpg" />
</div>
<div id="div3" style="display:none">
<img alt="" src="IMG/gerilim_hatti.jpg" />
</div> <div id="div4" style="display:none">
<img alt="" src="IMG/kan_golu.jpg" />
</div>
<div id="div5" style="display:none">
<img alt="" src="IMG/son_durak.jpg" />
</div>
</td>
<td align="left" valign="top" class="linkler">
<span onmouseover="Goster('1')"><a href="#"> Soysuzlar Çetesi</a></span><br />
<span onmouseover="Goster('2')"><a href="#"> Evdeki Düşman</a></span><br />
<span onmouseover="Goster('3')"> <a href="#"> Gerilim Hattı</a></span><br />
<span onmouseover="Goster('4')"><a href="#"> Kan Gölü</a></span><br />
<span onmouseover="Goster('5')"><a href="#"> Son Durak</a></span><br />
<table align="center" style="width: 182px; height: 214px;">
<tr>
<td align="left" valign="top">
<div id="icerik1" style="display:block; height: 203px;">
Alman işgali altındaki Fransa’da Shosanna
Dreyfus ailesinin Nazi albayı tarafından katledilmesine tanık olur.Bu filmi mutlaka izlemelisiniz.Kaçırırsanız çok üzülürsünüz demedi demeyin sonra.
</div>
<div id="icerik2" style="display:none">
Küçük bir meleği andıran bu evlatlık kız belki hiç de göründüğü gibi bir çocuk değildir.
Bu filmi mutlaka izlemelisiniz.Kaçırırsanız çok üzülürsünüz demedi demeyin sonra.
</div>
<div id="icerik3" style="display:none">
Bir grup arkadaş eğlenceli olacağını düşündükleri bir tırmanış yapmaya karar verir .
Bu filmi mutlaka izlemelisiniz.Kaçırırsanız çok üzülürsünüz demedi demeyin sonra.
</div>
<div id="icerik4" style="display:none">
Ormanda kamp yaparak romantik bir haftasonu geçirmeyi
planlayan çiftin haftasonu dehşet verici bir kabusa dönüşür.
Bu filmi mutlaka izlemelisiniz.Kaçırırsanız çok üzülürsünüz demedi demeyin sonra.
</div>
<div id="icerik5" style="display:none">
3D keyfinde izleyeceğiniz serinin dördüncü filminde herşey bir stadyum kazasında başlar.
Bu filmi mutlaka izlemelisiniz.Kaçırırsanız çok üzülürsünüz demedi demeyin sonra.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Ne yaptık ?
görüldüğü üzere filmlerin isimlerini <span > tagları içerinde yazdık ve spanın onmouse olayınada birazdan yazacağımız JavaScript fonksiyonun adı olan Goster yazdık ve parametre olarak da kaçıncı sıradaki film adı ise onu yadık. Yani faremiz hangi <span> tagının üzeirne gelirse o spna ayit sıra nomuz javascript fonksiyonuna gönderilecek . Sonra yine 5 adet <div> tagı içerinde her filmin posterine ayit olan resmi koyduk ve her bir poser için bir id yani sora no verdik . Birinci div hariç diğer divlerin display özelliklerini none yaptık böylece sayfamız açıldığında sadece ilk poster görünecektir .
Yine aynı mantık ile film hakkındaki kısa açıklamaları da divler içerisine yerkeştirdik ve icerik1,icerik2,icerik3,icerik4,icerik5 şeklinde id ler verdik. ilk divi görünür diğerlerini görünmz yaptık. Bu durumda sayfamız açıldığında "Soysuzlar Çetesi" isimli filme ayit resim yani div1 ID li resim ve icerik1 id li metin gelecektir.
Ekaran görüntüsü aşağıdaki gibi olacaktır.
Şimdi yapmamız gerken ise faremiz hangi film adının üzerine gitti ise o filme ayit poster solda ve o filme ayit açıklamayı da altta gösrtemek. Bunun yapabilmek için bir Java Script fonksiyonu yzmamız gerekiyor. Peki ne yapacak bu fonksiyon ?
Yapacağı işlem gayet basit , film isimlerinin bulunduğu <span> taglarındaki onmouseover olayından gönderilen numarayı alacak
ve bu numaraya ayit resimin divini görünür (display=block) yapmak diğerlerini ise görünmez (display=none) yapmak .
Şimdi Java Script kodunu aşağıdaki gibi yazın.
Not : ben javascript kodunu ayrı bir js uzantılı dosyaya yazıp o dosyayı ntml sayfasına include yaptım ,bunun yerine sayfanın <head></head> taglarının arasına <script ></script> bloklarının arasına da aynı kod yazılabilir.
Java Script Kodu :
function Goster(id)
{
for (var i=1;i<=5;i++)
{
if (i!=id)
{
document.getElementById("div"+i).style.display='none';
document.getElementById("icerik"+i).style.display='none';
}
else
{
document.getElementById("div"+i).style.display='block';
document.getElementById("icerik"+i).style.display='block';
}
}
}
Şimdi sayfayı yenileyip test ettiğimizde istenildiği gibi olduğunu yani hangi fareyi hangi film adının üzerine götürürsek o filme ayit resim ve açıklamanın geldiğini görebiliriz.
İşi biraz daha ileri götürmek isteyelim . Bu sefer filmlerin posterlerinin hepsini küçük birer resim olarak büyük poster resmin altında listeleyelim ve bu sefer küçük resimlerin üzeirne gelince aynı işlemler gerçekleşsin. Buarda yapmamız gereken çok fazla bişey yok yukarıda film isimlerini yaptığımız alan gibi bir alan daha oluşturacağız tek fark ise filmin adını göstermeyip filmin küçük resmini göstereceğiz. Yapmamız gereken tek şey Tablomuzun en altına bir <tr> daha eklemek yani </table> den hemen önce şu kodu yazmak
<tr>
<td id="kucukResim" class="style4">
<span onmouseover="Goster('1')" class="transparan"><a href="#"> <img src="IMG/soysuzlar_cetesi.jpg" width="50" height="50" /></a></span>
<span onmouseover="Goster('2')" class="transparan"><a href="#"> <img src="IMG/evdeki_dusman.jpg" width="50" height="50" /></a></span>
<span onmouseover="Goster('3')" class="transparan"> <a href="#"> <img src="IMG/gerilim_hatti.jpg" width="50" height="50" /></a></span>
<span onmouseover="Goster('4')" class="transparan"><a href="#"> <img src="IMG/kan_golu.jpg" width="50" height="50" /></a></span>
<span onmouseover="Goster('5')" class="transparan"><a href="#"> <img src="IMG/son_durak.jpg" width="50" height="50" /></a></span>
</td>
</tr>
Sayfamızın son görünümü aşğıadaki gibi olacaktır.
Artık manşet uygulamamızın güzelleştirilmesine geçelim yani CSS ...
NOT: Ben CSS kodumu ayrı bir css uzantılı dosyada yazıp uygulamama ekledim , bunun yerine <head></head> arasına <style></style> tagalrının içerisine de aynı kodları yazabiliriz.
CSS Kodu:
body
{
background-color: #000000;
font-family:Haettenschweiler;
}
#resimler img
{
width:300px;
height:400px;
border-style:solid;
border-width:thin;
border-color:White;
filter:Alpha(opacity=90);
-moz-opacity: 0.90;
}
#resimler:hover img
{
filter:Alpha(opacity=100);
-moz-opacity:1;
}
.linkler
{
color:Silver;
font-size:14 px;
}
.linkler a
{
color:White;
text-decoration:underline;
}
.linkler a:hover
{
color:Red;
text-decoration:none;
}
#kucukResim img
{
border-style:solid;
border-width:thin;
}
.transparan:hover img
{
filter:Alpha(opacity=100);
-moz-opacity: 1;
border-color:Red;
}
.transparan img
{
filter:Alpha(opacity=80);
-moz-opacity: 0.8;
border-color:white;
}
#genel
{
height : 525px;
}
Ve Bitti.... Uygulamamızın bitmiş hali aşağıdaki gibi olacaktır.
Uygulamanın çalışan halini BURADAN indirebilirsiniz.
Kolay Gelsin.
