Javascript ile Kayan Resim Scripti

PHP Script
Javascript kullanarak sağa-sola veya yukarı-aşağı kayan resimler, nesneler içeren bir script tasarlayacağız. Bunun için satırlarca kod yazmak yerine <marquee> ifadesinden faydalanacağız. Hemen her browser tarafından çalıştırılan basit, nurtopu gibi bir işlevimiz olacak.

Bunun için öncelikle <head> </head> tagları arasına ilgili fonksiyonumuzu içeren bir Javascript kodu ekleyeceğiz:

1
2
3
4
5
6
7
8
9
<!-- <head> </head> tagları arasına eklenecek kod -->
<script language="JavaScript">
 function sol() {
     kayan.direction="left";
     kayan.scrollAmount="13"; }
 function sag() {
     kayan.direction="right";
     kayan.scrollAmount="13"; }                                                
</script>

Ardından sitemizde sağa-sola kayan içeriğin bulunmasını istediğimiz yere aşağıdaki kodları ekleyeceğiz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- <body> </body> tagları arasına istediğiniz herhangi bir yere -->   
<marquee id="kayan" width="267" height="120" scrollamount="2" scrolldelay="20" onmouseover="kayan.scrollAmount='0'" onmouseout="kayan.scrollAmount='2'" bgcolor="#FCFFEB">

<!-- resimler -->
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/eminem-we-made-you.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/don-lafontaine.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/sultana-dibidik.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/detone.jpg">
<!-- resimler bitti -->

</marquee>

<br>   
<a href="javascript:void(0);" onmouseover="sag();" onmouseout="kayan.scrollAmount='2'">« sağa</a> | <a href="javascript:void(0);" onmouseover="sol();" onmouseout="kayan.scrollAmount='2'">sola »</a>

Eğer kodun sağa sola değil de yukarıdan aşağıya hareket etmesini istiyorsak bir kaç ufak değişiklik işimizi görecektir. Bunun için öncelikle <head> tagları arasına eklediğimiz kodlarda bulunan kayan.direction=”left”; ve kayan.direction=”right”; kısımlarını kayan.direction=”up“; ve kayan.direction=”down“; olarak değiştirip, <body> içerisine eklediğimiz koddaki <marquee satırına direction=”up” belirtgecini ekleyeceğiz. Yapılacak bir iki ufak değişiklik daha var fakat neden anlatmakla uğraşayım ki, düzenlenmiş halini vereyim sizin de işiniz görülsün değil mi :)

Yukarı – aşağı kayan resim scripti:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- <head> </head> tagları arasına eklenecek -->
<script language="JavaScript">
 function up() {
     kayan.direction="up";
     kayan.scrollAmount="13"; }
 function down() {
     kayan.direction="down";
     kayan.scrollAmount="13"; }    
</script>

<!-- <body> </body> tagları arasına istediğiniz herhangi bir yere -->   
<marquee direction="up" id="kayan" width="160" height="226" scrollamount="2" scrolldelay="20" onmouseover="kayan.scrollAmount='0'" onmouseout="kayan.scrollAmount='2'" bgcolor="#FCFFEB">

<!-- resimler -->
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/eminem-we-made-you.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/don-lafontaine.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/sultana-dibidik.jpg">
    <img src="http://www.egonomik.com/wp-content/uploads/2009/04/detone.jpg">
<!-- resimler bitti -->

</marquee>

<br>   
<a href="javascript:void(0);" onmouseover="up();" onmouseout="kayan.scrollAmount='2'">&#708; yukarı</a> | <a href="javascript:void(0);" onmouseover="down();" onmouseout="kayan.scrollAmount='2'">aşağı &#709;</a>

Scriptin çalışan örneğini buradan görebilirsiniz.
Umarım işinizi görür.

İlginizi Çekebilecek Diğer İçerikler

44 Yorum

  1. ibrahim dedi ki:

    Resimler ve kodlar güzel işime yaradı teş. ederım
    ama bı konuda işe yaramadı populer uyeler olarak kullanmak ıstedım kodu ama ısım yazıyorum cıkmıyor tekrar buna yardımcı olurmusunuz

    • Caner Öncel dedi ki:

      Kodu kullandığınız yere baktım ve aslında isimler mevcut fakat hem zemin
      rengi hem de yazı renginiz beyaz olduğu için görünmüyor. İsimlerin rengini
      değiştirmeyi deneyin.

      Şuna benzer basit bir kod işinizi görecektir:
      <font color="#000000">İSİM BURADA</font>

  2. Zkaraeli dedi ki:

    Ellerinize saglık güzel olmuş.

  3. mehmet demiray dedi ki:

    İşimi görecek inşallah ama aşağıdaki sağa sola yerine tıklayınca o hala soldan kaptırmaya devam ediyo duduramıyorum keretayı :D Bunu ancak sen durdurursun Caner.. Neden böyle oluyo acaba ?

  4. Caner Öncel dedi ki:

    Allah Allah, hocam kullandığın yere bi göz atalım olmazsa bakalım derdi neymiş :)

  5. mehmet demiray dedi ki:

    Bak bakalım sorunu neymiş :D
    http://www.emlakkocaeli.net/b.html

  6. Caner Öncel dedi ki:

    E abi “head /head tagları arasına eklenecek kod” kısmını es geçmişsin script ne yapsın? :) Şöyle güzelce bi ile başlat sayfayı da bu koduda