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

[Abdullah Şahin]

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]

Resimli bir anlatım olsaydı daha iyi olurdu. Ders için Teşekkürler.

 

[Emine Şahin]

şahsen sonucu görmek isterdim ama.
teşekkür ederiz anlatımınız için.

 

[Abdullah Şahin]

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ı

 

[Serkan Baysal]

Ben bu konuyla ilgili paylaşımınız görmek isterim. Zahmet olmazsa yayınlarmısınız?

 

[Abdullah Şahin]

@Designer_S

Zahmet ne kelime . Bilakis ilginiz beni mutlu eder 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.

 

[Serkan Baysal]

İlginiz için teşekkür ederim kendo. Saygılar.

 

[Abdullah Şahin]

yardımcı olabildi isem ne mutlu bana paylaşımlarım devam edecek

 

[şakirm]

Çok güzel olmuş bende bu işe meraksaranlardanım ve verdiğin kodları denedim gercekten güzel eline sağlık

 

[ghun]

teşekkürler anlatim için sagolun