Javascript ile Manşet Haber Tarzı Bir Sistem Yapmak

Bu dersimizde manşet haber tarzında bir sistem yapalım.

Bu dersimizde manşet haber tarzında bir sistem yapalım. Mantığı çok basit.

Ben resimlerimi resimler adında bir klasörde topladım ve buradan çektim.

Küçük resimlerimin sonuna k harfi ekledim, yani 1.jpg büyük resim kısmında, 1k.jpg ise küçük resim kısmında olacak.

Resimlerim bunlar, ben buraya resimleri koydum ama siz değiştirin.












style.css adında bir .css dosyası oluşturduk.


body {

    color: #fff;

    font-family: Arial;

    font-size: 10px; }



#buyukresim {

    width: 580px; 

    padding-top: 15px;

    padding-bottom: 15px;

    border: 1px solid #fff;

    background: #fff;

    margin: 10px;

    }



#sanalkurs {

    width: 350px;

    background-color: #fff;

    background-repeat: no-repeat;

    background-position: center;

    }

    

#sanalkurs img {

    width: 350px;

    height: 262px;

    border: 2px solid #fff;    

    }



#kucukresimler {

    margin-top: 15px; 

    }



#kucukresimler img {

    width: 100px;

    height: 75px;

    border: 2px solid #fff; 

    }



Style.css den sonra ise kodlarımıza geçelim bu kodları index.html olarak kayıt edebilirsiniz.


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />

<title>Sanalkurs.net | Ne Yapabileceğini Göster!</title>

<script type="text/javascript">

function resimler(yol){

document.getElementById("sanalkurs").innerHTML = "<img name="resim" src=""+ yol +"" />";

}

</script>

<link rel="stylesheet" type="text/css" href="style.css"> 

</head>

<body>

<center>

    <div id="buyukresim" align="center">

        

        <div id="sanalkurs" name="sanalkurs">

        <img name="resim" src="resimler/1.jpg" style="width: 350px; height: 262px" />

        </div>



        <div id="kucukresimler">

         <a href="http://www.sanalkurs.net" onMouseOver="resimler('resimler/1.jpg');"><img src="resimler/1k.jpg" style="width: 42px; height: 33px" /></a>

         <a href="http://www.google.com" onMouseOver="resimler('resimler/2.jpg');"><img src="resimler/2k.jpg" width="100" style="width: 42px; height: 31px" /></a>

         <a href="http://www.facebook.com" onMouseOver="resimler('resimler/3.jpg');"><img src="resimler/3k.jpg" width="100" style="width: 42px; height: 31px" /></a>

         <a href="http://www.twitter.com" onMouseOver="resimler('resimler/4.jpg');"><img src="resimler/4k.jpg" width="100" style="width: 42px; height: 31px" /></a>

         <a href="http://www.friendfeed.com" onMouseOver="resimler('resimler/5.jpg');"><img src="resimler/5k.jpg" width="100" style="width: 42px; height: 31px" /></a>

        </div>

        

    </div>

    

    </center>

</body>

</html>



Biraz kodları açıklayayım:

Resimler adında bir fonksiyon oluşturduk ve (yol) ile resimlerin yollarını gösterdik.


<link rel="stylesheet" type="text/css" href="style.css">



Bu kod ile .css dosyamızı çektik.

Sayfamız ilk açıldığında karşımıza ilk resmimizin gelmesi için


<div id="sanalkurs" name="sanalkurs">

        <img name="resim" src="resimler/1.jpg" style="width: 350px; height: 262px" />

        </div>



Kodumuzu kullandık. Kucukresimler diye bir div oluşturduk ve buraya küçük resimlerimiz koyduk.


<a href="http://www.sanalkurs.net" onMouseOver="resimler('resimler/1.jpg');"><img src="resimler/1k.jpg" style="width: 42px; height: 33px" /></a>



Küçük resime tıkladığımızda sanalkurs.net'e link verdik ve onMouseOver ile küçük resmimizin üzerine geldiğimizde büyük resmi göstermesini sapladık.

Kolay Gelsin.
  • Etiketler;
Oğuzhan Tüfekci
Uzun zamandır bilgisayarla iç içe olan Oğuzhan Tüfekci, şu anda freelance olarak çalışıyor. <p>Yazılım geliştirme, grafik tasarım ve web tasarımı üzerine yoğunlaşan yazar, Html, Php, Asp, Asp.NET, Css, Javascript, AutoCAD, C, C++, Visual Basic, Flash, Photoshop, Corel Draw ve Illustrator biliyor.
Yorum Yaz

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

Öncelikle tşklr. De ben yapamadım galiba olmadı bu sen deneyen varmı ??
Adımların hepsini doğru yaptığınızdan eminseniz tam olarak nasıl bir hata aldığınızı yazarsanız yardımcı olurum.Teşekkürler
document.getElementById("sanalkurs").innerHTML bu satırda bi hata varmış kardeş
Arkadaşlar kusura bakmayın gözümden kaçtı sanırım Bu kodu bulup; document.getElementById("sanalkurs").innerHTML = "<img name="resim" src=""+ yol +"" />"; _________________________________________________________________ Bu kod ile değiştiriniz. document.getElementById("sanalkurs").innerHTML = "<img src="+ yol +" />";

Yukarı Git