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

Facebook Yorumları

44 Yorum

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