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.

Facebook Yorumları

43 Yorum

  1. 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
      Yazar

      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. İş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ı 😀 Bunu ancak sen durdurursun Caner.. Neden böyle oluyo acaba ?

  3. Caner
    Yazar

    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 taglarının arasına ekle ondan sonra çalışır 🙂

  4. Caner
    Yazar

    homepage.php de head yoksa header.php gibi bir dosya olması lazım yani sitenin tema kullandığını varsayarak söylüyorum. Öyle veya böyle tüm sayfalar neticede html ve head taglarıyla başlamak zorunda size düşen bu tagların hangi dosyanın içinde olduğunu bulmak 🙂

  5. ya tamamda ben onu istediğim yere koyamam o zaman.. Koymak istediğim yerde head kodu yok.. Yani anasayfanın tema dosyası indexhomepage.tpl burda araya biyere koyucam ama head kodu yok.. Anlatmaya çalıştım ama anlamışsındır umarım 😀

  6. Caner
    Yazar

    Tamam hocam o zaman siz de head tagları arasına konulması gereken kodu script kodlarının hemen üzerine yerleştirin, yine çalışır sanırım 🙂

  7. Allah sizeden razı olsun ben yalakalık yapmıyorum bu koddanda faydalanmadım ama daha sizin gibi iyi insanlar varmış demekki oturup bunları yazıyorsunuz insanlar faydalansın diye sizi tanımayı çok istiyorum ekleyin kardeş beni

  8. Hakan

    Kardeşim Elleirne sağlık cok güzel fakat sağa sola kayan kodlarda sağ tarafta sağa sol tarafta sola yazsa daha güzel olmazmı =)

    Genelde ucak oyunlarında olur bu tip şeyler aşarı basarsın yukarı cıkar.
    Rica etsem onu düzenleyebilirmisin..

  9. Caner
    Yazar

    Hakan: işte o konuda bi kısım senin gibi düşünüyor bi kısım öbür türlü, en iyisi sağ sol diye kendi keyfine göre düzenlemek 🙂

  10. Hanife

    Merhaba, Bu siteyi bugün keşfettim ve çok beğendim. Harika şeyler var, jquery tam benim istediğim şeyler. Emeği geçenleri tebrik ediyorum. Ellerinize sağlık.

  11. bir Subdomain açıp WordPress Kurdum 😀 bakalım forumdan daha iyi gibi geldi bana ve istediğimiz herseyi html kodlarıyla gösterebiliyoruz forumda böyle özellikler ne yazıkki pek coğunda yok anlaşırsak forumu kaldırmayı düşünüyorum 😀 burdada worpressle ilgili konulara baktım ama pek bişey bulamadım site yöneticileri böyle birşey düşünmüyorlamı acaba wordpressle ilgili ?

  12. Caner
    Yazar

    @Sedat internette WordPress ile ilgili gerçekten çok faydalı Türkçe/İngilizce ve haddinden fazla kaynak var ama madem öyle diyorsun bundan sonra bu konuya da biraz eğilelim 🙂

    • Ohm ELEK

      Merhaba Biz elektrik firmasıyız mailden çalıştığımız firmaların Logolarnı Müşterilerimize reklam amaçlı nasıl gönderebiliriz

  13. Caner
    Yazar

    Resimlerin kayarken titrememesi veya daha akıcı kayması için kayan.scrollAmount=’2′ değerlerindeki rakamları değiştirip istediğiniz hızı ve akıcılığı yakalayabilirsiniz (eğer durum tarayıcınızla alakalı değilse).

    Resimlerin boşluksuz kayması olayı ise bildiğim kadarıyla marquee fonksiyonu ile mümkün değil ve açıkcası bu ufak scripti hazırlarken farklı tarayıcılarda test etmemiştim şimdi Opera kullanıyorum ve gördüğüm kadarıyla Opera’da pek stabil çalışmıyor, bu ve buna benzer sorunlar için daha makul ve muhtemelen javascript ağırlıklı bir kayan resim scripti tasarlamayı düşünüyorum.

  14. evet var ama hep profosyonel olarak anlatmıslar 😀 ben yeniyim bu wordpresste daha az once tema yukleyemedim 😀 bakıyorum bakıyorum onlarda bana bakıo daha hiç biyerede uye olmadım senin yazılarını gördum baska sitelerde onlardanda anlamadım mesela en basitinden baslasan ben logo ve url uzanrılarına taktım 😀 url uzantıları siteismi.com/cat1 pat 2 felan filan html yada senin gibi http://www.egonomik.com/2009/04/javascript-ile-kayan-resim-scripti/ böle seyler ..
    baya urasacam bunda anlasılan 😀

  15. Hanife

    Fotoğraflarım büyük olduğu için marquee fonksiyonu işime yaramıyor aslında. kayan.scrollAmount=?2? ile çok yavaş oluyor. artırınca titriyor. olmuyor yani. sanırım aramaya devam edeceğim, yarına bunu halletmem lazım 🙁 . Teşekkürler…

  16. Caner
    Yazar

    @Sedat evet biraz zaman ve emek isteyen bir olay WordPress ama aslında hangi oluşum istemez ki? Tamam bu konu üzerine eğileceğim biraz 🙂

    @Hanife ben bu scripti bir çok tasarımımda kullandım aslında ama sana yardımcı olamadığım için üzgünüm, dediğim gibi daha gelişmiş bir script yazacağım bu konuyla ilgili.

  17. Caner
    Yazar

    <img src=”resim.jpg” width=”100″ height=”100″> “width” ve “height” ifadeleriyle resmin genişlik ve yüksekliğini ayarlayabilirsiniz.

  18. Yaklaşık 2 haftadır paylaşımlarını takip ediyorum. Hakkında şunu söyleyebilirim: Süpersin! Her blogun e posta listesine kaydolmam, seninkine oldum valla, ne yalan diyim.. 🙂 öyle ki, biraz önce ilk blog girdinden başlayıp başa doğru geliyorum şimdi, nerdeyse her girdini inceliyorum. Özgünlük böyle birşey olsa gerek, tebrik ederim…

  19. Ben Kendi siteme eklemeye çalıştım ancak resim son olduğunda hemen loop yapmıyor. bekliyor ki ta son resim bitsin, ve yeni slide giriş yapsın. devamlı yapabilecek bir loop yada surekli devam ettirecek bir kod yok mu?
    EKLEMEYE CALISTIGIM KOD ASAGIDA. BIR FIKIR VEREBILIRMISINIZ?

    <!– <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″; }

    </head>

    <body>

    <!– <body> </body> tagları arasına istediğiniz herhangi bir yere –>  
    <marquee id=”kayan” width=”590″ height=”75″ scrollamount=”2″ scrolldelay=”20″ onmouseover=”kayan.scrollAmount=’1′” onmouseout=”kayan.scrollAmount=’10′” bgcolor=”#FFFFFF”>

    <!– resimler –>

    <img src=”akilli-tahta.jpg” height=”70″>
    <img src=”projeksiyon.jpg” height=”70″>
    <img src=”perde.jpg” height=”70″>
    <img src=”yazici.jpg” height=”70″>
    <!– 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>
    </body>
    </html>

  20. R2maru

    Arkadaşalr resimler bittikten sonra hemen başa dönüyor bu da kötü bir görünüm veriyor ben resimlerin başa dönmeden sürekli tekrar etmesini istiyorum yardımcı olabilimisiniz

  21. çiçek siparişi

    merhaba, yeni tasarladığımız temamız için güzel bi kaynak kodu oldu. çok teşekkürler, iyi çalışmalar

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir