Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Değişken Haber Banner Yapma İşlemi
     admin     25.12.2012     11:38:35

Kod dünyası ana sayfasında ya da mynet anasayfasında gördüğünüz, fare ile üzerine gelindiğinde değişen bir habr banner yapmak ister misiniz? Çözüm burada. Bu konu göründüğünden çok daha basit.. Basit bir java script fonksiyonu ile bu olayı gerçekleştirebilirsiniz. Değişik tasarımlar yapmak size kalmış..



Öncelikle 5 adet resim hazırlayın ve aşağıdaki kodları uygulayın. Resmin büyük halini görüntülemek için bir div içinde bir img etiketi ve küçük resimler için 5 div ve içlerinde img etiketleri kullanıldı. Head bölümünde bu öğeler css ile biçimlendirldi.

<Html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
#buyukres {
background-color:#999999;
float:none;
left:100px;
width:318px;
height:200px;
border:1px solid blue;
}
.kr {
   width:60px; 
   height:50px; 
   border:1px solid black;
   float:left;
   padding:1px;
}
</style>
 <script type="text/javascript" language="javascript">
        var buyuk_resim, gelen_resim;
        function degistir(buyuk_resim, gelen_resim) 
{
                  buyuk_resim.src = gelen_resim;    
                }
</script>
</head>
<body>
<div id="buyukres">
<img src="res1.jpg" name="br" style="width:300px; height:200px;" />
</div>
<div id="kucukres1">
<img src="res1.jpg" class="kr" onmouseover="degistir(br,’res1.jpg’)" />
<!-- br, büyük resim kutusunun name değeridir. degistir fonksiyonundaki 1.değişkene gönderilmektedir. 2.değer görüntülenecek resim dosyasının adıdır. -->
</div>
<div id="kucukres2">
<img src="res2.jpg" class="kr" onmouseover="degistir(br,’res2.jpg’)" />
</div>
<div id="kucukres3">
<img src="res3.jpg" class="kr" onmouseover="degistir(br,’res3.jpg’)" />
</div>
<div id="kucukres4">
<img src="res4.jpg" class="kr" onmouseover="degistir(br,’res4.jpg’)" />
</div>
<div id="kucukres5">
<img src="res5.jpg" class="kr" onmouseover="degistir(br,’res5.jpg’)" />
</div>
</body>
</html>

Facebook'ta Paylaş    
Diğer JavaScript İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...

Ayhan Sarı    03.02.2013    00:01:49

 Kodları kopyalayıp aldıktan sonra, tek tırnakları ( ’ ) silerek yeniden giriniz.


fırat    04.01.2014    13:53:06

arkadaşlar ben yapamadım yaa siteme koyucamda nasıl yapıcaz ?? açıklayabilirmisiniz


erciyesmuzikaletleri    10.08.2014    00:40:31

erciyesmuzikaletleri