Web sayfalarımızın bazı kısımlarında yazı ya da resimlerin kayarak geçmesini isteyebiliriz. Bu gibi durumlar için HTML’de bulunan marquee etiketinden faydalanacağız. Bu arada kayan yazıyı hangi resmin ifade edebileceğini bilmediğimden üzerinde ledlerle kayan yazı yazan bir tabelanın resmini koydum yazıya öne çıkarılmış görsel olarak.
Neyse tekrar konumuza dönelim. Diyelim ki Ahmet İşcan yazısını kaydırmak istiyoruz. onun için kullanacağımız kod <marquee>Ahmet İşcan</marquee> şeklinde olacak.
Şimdi konuyla ilgili birkaç örnek yapalım. Örneklerin nasıl çalıştığını görmek için örnek kodların alt kısmında bulunan Demo linklerini kullanmanız yeterlidir.
Örnek 1:
1 2 3 4 5 6 7 8 | <html> <head> <title>Kayan Yazı Ahmet İşcan</title> </head> <body> <marquee>Ahmet İşcan</marquee> </body> </html> |
Örnek 2:
Ama gördüğünüz gibi marquee etiketine hiçbir parametre vermezsek sadece sağdan sola kayıyor. Ama biz istersek yazımızın sürekli kaymasını engelleyerek sağa ve sola çarpmasını sağlayabiliriz. Bunun için behavior=”alternate” parametresini eklememiz yeterli.
1 2 3 4 5 6 7 8 | <html> <head> <title>Kayan Yazı ahmetiscan.web.tr</title> </head> <body> <marquee behavior=“alternate”>ahmetiscan.web.tr</marquee> </body> </html> |
Eğer kayan kısmın arkaplanını da değiştirmek istersek kodumuza bgColor=”red” parametresini eklememiz yeterli.
1 2 3 4 5 6 7 8 | <html> <head> <title>Kayan Yazı ahmetiscan.web.tr</title> </head> <body> <marquee behavior=“alternate” bgColor=“red”>ahmetiscan.web.tr</marquee> </body> </html> |
Şimdiye kadarki örneklerde metinlerimizi sağa veya sola kaydırıyorduk. Eğer yukarı veya aşağı kaydırmak istiyorsak da direction parametresinden faydalanacağız.
Yukarı doğru kaydırmak için direction=”up” parametresini, aşağı doğru kaydırmak içinse direction=”down” parametresini kodumuza ekliyoruz.
1 2 3 4 5 6 7 8 | <html> <head> <title>Kayan Yazı ahmetiscan.web.tr</title> </head> <body> <marquee direction=“up” bgColor=“red”>ahmetiscan.web.tr</marquee> </body> </html> |
Şimdiye kadarki örneklere dikkat ettiyseniz genişlik ve yüksekliği belirlemedik. Kayan kısmın büyüklüğünü belirlemek içinse height(yükseklik) ve width(genişlik) parametrelerinden faydalanacağız.
1 2 3 4 5 6 7 8 | <html> <head> <title>Kayan Yazı ahmetiscan.web.tr</title> </head> <body> <marquee direction=“up” bgColor=“red” width=“100” heigth=“800”>ahmetiscan.web.tr</marquee> </body> </html> |
Metin yerine resim kaydırmak istersek de durum aslında pek farklı değil. Yine marquee etiketinin içerisinde resimleri img etiketiyle ekliyoruz. Tam olarak ne demek istediğimi aşağıdaki örnek koddan anlayabilirsiniz.
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Kayan Yazı ahmetiscan.web.tr</title> </head> <body> <marquee width=“950” height=“200” bgcolor=“red”> <img src=“1.jpg” width=“200px” heigth=“800px”> </marquee> </body> </html> |
Birden fazla resmi de yan yana kaydırmak istersek marquee etiketinin içerisinde birden fazla img etiketi kullanacağız sadece 🙂