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.

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat