Kayan Yazı Nasıl Yapılır?

Abdullah Şahin

Altın Üye
Altın Üye
Kayıt
3 Nisan 2008
Mesaj
2.630
Tepki
89
Tekstil Grafik Kursu
Bu örneğimizde <marquee></marquee> tagını kullanarak kayan yazı sistemini nasıl yapacağımızı göreceğiz...


1. Aşama

Kaydırmak istediğimiz alanı oluşturularım.

Kaydırmak istediğiniz alanı oluştururken her hangi bir kısıtlamanız yoktur. Bu alan bir tablodan da oluşabilir, resimden de oluşabilir yada sadece basit bir yazıdan da oluşabilir.

Bu örnekte ben kayan alan olarak basit bir yazı kullanacağım... Kayan yazı için kullanacağımız metin "Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu"...


2. Aşama

Belirlediğimiz alanı kaydırmaya başlayalım.

**Kaydırmak istediğimiz alanı oluşturduktan sonra kaydırma işlemini gerçekleştirebilmek için <marquee></marquee> tagını kullanıyoruz...

**Kısaca özetlersek kodumuz şu şekilde olmalı:
<marquee direction="up">Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu</marquee>

**Şimdi olayımızı biraz daha geliştirelim. Hareket hızını ayarlamak için marquee tagının scrollamount özelliğini kullanıyoruz...
<marquee direction="up" scrollamount="1">Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu</marquee>

**Kaydırılacak alanın boyutlarını ayarlamak için width ve height özelliklerini kullanıyoruz...
<marquee direction="up" scrollamount="1" width="200" height="100">Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu</marquee>

**Ve son olarak mouse ile bu alana girdiğimiz hareketin durmasını, mouse un bu alandan çıkması halinde ise harekete devam etmesini sağlayalım...
<marquee direction="up" scrollamount="1" width="200" height="100" onMouseOver="stop()" onMouseOut="start()">Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu</marquee>

**Sonuç olarak kodumuz aşağıdaki gibi olmalıdır...


**<marquee direction="up" scrollamount="1" width="200" height="100" onMouseOver="stop()" onMouseOut="start()">Grafikerler.Org Grafikerler Paylaşım Platformu Online Grafiker Okulu</marquee
 

Serkan Baysal

Altın Üye
Altın Üye
Uzman Üye
Kayıt
10 Haziran 2008
Mesaj
2.204
Tepki
76
Resimli bir anlatım olsaydı daha iyi olurdu. Ders için Teşekkürler.
 

Abdullah Şahin

Altın Üye
Altın Üye
Kayıt
3 Nisan 2008
Mesaj
2.630
Tepki
89
text yerine isterseniz resim de koyabilirsiniz. yazı yerine resim kayar. Hatta üzerine tıklayınce önizlemesi açılacak şekilde de ayarlayabilirsiniz. Talep olrusa onun kodunuda buraya yazarım. Resim kaydırırken benim tavsiyem aşağıdan yukarı değilde soldan sağa kayması :D
 

Serkan Baysal

Altın Üye
Altın Üye
Uzman Üye
Kayıt
10 Haziran 2008
Mesaj
2.204
Tepki
76
Ben bu konuyla ilgili paylaşımınız görmek isterim. Zahmet olmazsa yayınlarmısınız?
 

Abdullah Şahin

Altın Üye
Altın Üye
Kayıt
3 Nisan 2008
Mesaj
2.630
Tepki
89
@Designer_S

Zahmet ne kelime . Bilakis ilginiz beni mutlu eder :D Aşağıda text yerine soldan sağa kayan resim kodunu veriyorum.


<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=3
scrollDelay=10 width="100%" height=25 ALIGN="top"><a target="_blank" href="../Belgelerim/Resimlerim/20330_large.jpg"><img border="0" src="file:///C://Belgelerim/Resimlerim/20330_large.jpg" width="200" height="400">
<a target="_blank" href="../Belgelerim/Resimlerim/battaniye_large.jpg"><img border="0" src="../Belgelerim/Resimlerim/battaniye_small.jpg" width="320" height="240"></a></p>
</MARQUEE>

Kodda yer alan _blank ibaresi tıkladığınızda açılacak olan resmin yeni pencerede açılmasını sağlıyor. Src ile yazan yerler ekranda kayan resmin yolunu belirtir. <a target="_blank" href ile başlayan kısım ise kayan resme tıkladığınızda açılacak olan resmin yolunu gösterir. Umarım açıklayabilmişimdir. Herhangi bir sorunuz olduğununda burdan sorabilirsiniz.
 

şakirm

Üye
Kayıt
23 Temmuz 2008
Mesaj
7
Tepki
0
Çok güzel olmuş bende bu işe meraksaranlardanım ve verdiğin kodları denedim gercekten güzel eline sağlık
 
Yukarı Alt