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ı

44 Yorum

  1. dadas

    hocam eline ve ilgine sağlık. allah razı olsun. ama sağa sola kısmı çalıştıramadım. frontpage ön izlemede çalıştırdım ama sitede olmadı. wp de kodu header homepage ne varsa oralara ekledim ama olmadı.

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