JavaScript İle Manşet Sistemi!

Evet arkadaşlar bu dersimizde haber manşet sistemi yapımını göreceğiz!!

Merhabalar bir dersimizde daha beraberiz!

İlk önce kodumu yazdıktan sonra açıklama yapıyorum.

İlk Önce Jscript.js Adında bir dosya açık alttaki kod blogunu kaydedin.

Jscript.Js


function Goster(id)

    {

                 for (var i=1;i<=6;i++)

                {

                    if (i!=id)

                    {

                     document.getElementById("icerik"+i).style.display='none';

            document.getElementById("div"+i).style.display='none';         

                     

                        }

                    else

                        {

                    document.getElementById("icerik"+i).style.display='block';

document.getElementById("div"+i).style.display='block';

                    

                    

                   

                    }

                    

                    

            }



Bir döngü yarattık, ben 6'ya kadar değerimizin dönmesini istedim ve document.GetElementById parametremizle id'mizi çağırdım ve i döngüsü ile bir artırdım.

Default.html


<html>

<head>

<meta content="Language" language="tr">

<title>Manset Sisstemi-Rıza Soylu</title>

<script src="Jscript.js" type="text/javascript" ></style>

</head>

<body>

<table border="0" cellspacing="1" cellpadding="1" width="800">

<tr>

<td width="200"><table border="0" cellspacing="1" cellpadding="1" width="200"><tr>

<td>

<div id="div1"><img src="resim1.jpg"></div>

<div id="div2"><img src="resim2.jpg"></div>

<div id="div3"><img src="resim3.jpg"></div>

<div id="div4"><img src="resim4.jpg"></div>

<div id="div5"><img src="resim5.jpg"></div>

<div id="div6"><img src="resim6.jpg"></div>

</td>

</tr>

</table>

</td>

<td width="500"><span onmouseover="Goster('1')"><a href="adres1">Resimyolu</a></span><br/>

<span onmouseover="Goster('2')"><a href="adres2">Resimyolu</a></span><br/>



<span onmouseover="Goster('3')"><a href="adres3">Resimyolu</a></span><br/>



<span onmouseover="Goster('4')"><a href="adres4">Resimyolu</a></span><br/>



<span onmouseover="Goster('5')"><a href="adres5">Resimyolu</a></span><br/>



<span onmouseover="Goster('6')"><a href="adres6">Resimyolu</a></span><br/>

<br/>

<div id="icerik1">Açıklama1</div>

<div id="icerik2">Açıklama2</div>

<div id="icerik3">Açıklama3</div>

<div id="icerik4">Açıklama4</div>

<div id="icerik5">Açıklama5</div>

<div id="icerik6">Açıklama6</div>

</td>

</tr>

</table>



Arkadaşlar, o kadar bir zor mantık kullanmadık. Ben sadece resimlerim ve yazılar için iki tane id atadım; resimler için "div" açıklamam içinde "icerik", bunları java dosyamda Goster adlı bir function oluşturdum Ve bu div, icerik adlı idleri çağırıp bir döngüye soktum ve bunları da üzerine gelince sıra sıra göstermesini istedim. Function adımız Goster'di ve:


<span onmouseOver="Goster('1')">Çıkan</span>



şeklinde ona karşı gelen resim ve açıklama çıkacaktır.

İyi Çalışmalar...
  • Etiketler;
Rıza Soylu
Ankara'da dünyaya geldi. 2008 yılında tanıştığı web geliştiricisi bir arkadaşı vasıtasıyla kendisini geliştirirek HTML, ASP, ASP.net, jQuery, Javascript, CSS ve ActionScript öğrenmeye başladı. <p>2009 yılından bu yana önemli projelerde yer alan Rıza Soylu, bilgisini Sanalkurs'ta paylaşıyor ve çalışmalarını geliştirmeye devam ediyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Paylaşımınız için teşekkürler. En azından bazı konularda fikir verdi. Ancak kodlama biraz karışık olmuş.
Paylaşım güzel teşekkürler ama sorum var arkadaşlar ben siteme iletişim formu eklemek istiyorum kodlarla normalde siteden ekleye biliyorsun ama yaptısın yasatımın icinde olmuyor boşş sayfada oluyor bilen varsa benle iletişime gecerse sevinirim saygılarla?
ben denedim çalıştıramadım bir teslik var galiba head js dosya script src="Jscript.js" type="text/javascript" [/style burası yanlış galiba] style yerine /script olması gerek öylede denedim olmadı varsa dosya olarak paylaşırsanız sevinirim
Evet Arkadaşlar bir yanlışlık olmuş script src="Jscript.js" type="text/javascript" [/style yerine </scrpit> olarak kapatılacak
S.a Arkadaslar Bana bi tane Sitenin soluna yerlesdirmek icin resimli haber panosu lazim asagi yukari butonlariyla degistirilen ve otomatik degisilen..yardim ederseniz sevinirim

Yukarı Git