Kayan Yazı, Resim Yapma ve Marquee Kullanımı

  • 132.987
  • 05 Kasım 2006

Bu dersimizde nasıl kayan yazı ve resim yapılır? Marquee'nin Kullanımını anlatacağım.

Bir şeyi kaydırmak için gerekli kodumuz:

<marquee></marquee>

şeklindedir.

Örneğin Sanalkurs yazısını kaydırmak için şu komutu kullanırız.

<marquee>Sanalkurs</marquee>

KLASİK SAАDAN SOLA KAYDIRMA

<html>
   <head>
      <title>Kayan Yazı-Sanalkurs</title>
   </head>
   <body>
      <marquee>Sanalkurs</marquee>
   </body>
</html>

YAZIYI SAАA SOLA ÇARPTIRMAK

Ama yazımız sağdan sola doğru kayıyor. Bunu istersek sağa sola çarptırabiliriz. Bunun için behavior="alternate" kullanacağız. Bu kodumuz sağa sola çarptırmak için gerekli olan koddur.

<html>
<head>
    <title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
    <marquee behavior="alternate">Sanalkurs</marquee>
</body>
</html>

RENKLİ BİR ŞERİT ÜZERİNDE KAYDIRMA

Eğer kırmızı bir şerit üzerinde kaymasını istiyorsak marquee'nin rengini değiştirebiliriz. Bunun için bgColor="red" kodunu kullanabiliriz.

<html>
<head>
    <title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
    <marquee behavior="alternate" bgColor="red">Sanalkurs</marquee>
</body>
</html>

AŞAАIDAN YUKARI KAYDIRMAK

Yazımızı alttan üste doğru çıkartmak istiorsak direction="up" kodunu kullanırız. Eğer üstten alta doğru kaydırmak istiyorsak direction="down" deriz. Ama bir çok sitede görmüşünüzdür; duyurular bölümü diye alttan üste doğru kayan yazılar vardır. Biz de böyle birşey yapabiliriz. Ben bu durumda behavior="alternate" kodunu
sileceğim. Silmesek de calışır ama ben çarptırmak istemediğim için siliyorum. Şimdi kodumuzu yazalım:

<html>
<head>
    <title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
    <marquee direction="up" bgColor="red">Sanalkurs</marquee>
</body>
</html>

Şimdi burada dikkatimizi çeken bir olay var: Marquee alanı biraz geniş, bunu küçültmemiz gerekmez mi? Bunun için width="100" heigth="800" kodlarımızı kullanıyoruz. Burada width marquee'nin enini heigth ise boyunun boyutunu belirler.

<html>
<head>
    <title>Kayan Yazı-Sanalkurs</title>
</head>
<body>
    <marquee direction="up" bgColor="red" width="100" heigth="800">Sanalkurs</marquee>
</body>
</html>

BİR RESMİ KAYDIRMAK

Şimdi gelelim resim kaydırmaya aslında bununda yazıdan hiçbir farkı yoktur. Şimdi bir kırmızı şerit üzerinde bir resmimizi kaydıralım

<html>
<head>
    <title>Kayan Yazı Sanalkurs</title>
</head>
<body>
    <marquee width="950" height="100" bgcolor="red">
        <img src="1.jpg" width="100px" heigth="800px">
    </marquee>
</body>
</html>

ÇOKLU RESİM KAYDIRMAK

Şimdi 3 tane resmi yan yana kaydıralım. 3 tane resmimizi çağırıyoruz

<html>
<head>
    <title>Kayan Yazı Sanalkurs</title>
</head>
<body>
    <marquee width="950" height="100" bgcolor="red">

        <img src="1.jpg" width="100px" heigth="800px">

        <img src="1.jpg" width="100px" heigth="800px">

        <img src="1.jpg" width="100px" heigth="800px">
    </marquee>
</body>
</html>

RESİMLERİ AŞAАIDAN YUKARI KAYDIRMAK

Ben şimdi resimleri aşağıdan yukarı doğru kaydırmak istiyorum. Bunun için de kayan yazıdaki gibi direction="up" kodumu kullanacağım, ama biraz da heigth değerini genişleteceğim.

<html>
<head>
    <title>Kayan Yazı Sanalkurs</title>
</head>
<body>
    <marquee direction="up" width="800" height="400" bgcolor="red">
        <img src="1.jpg" width="100px" heigth="800px">
        <img src="1.jpg" width="100px" heigth="800px">
        <img src="1.jpg" width="100px" heigth="800px">
    </marquee>
</body>
</html>

Ama yukardaki kodumuzda resimler yan yana. Peki bunu alt alta nasıl yapabiliriz? Bunu da resimlerin arasına <br> kodumuzu koyarak yapabiliriz. <br> kodumuz enter görevini üstlenir burada ve biraz da marquee'nin width boyutu ile oynayacağım.

<html>
<head>
    <title>Kayan Yazı Sanalkurs</title>
</head>
<body>
    <marquee direction="up" width="100" height="400" bgcolor="red">
        <img src="1.jpg" width="100px" heigth="800px">
        <br>
        <img src="1.jpg" width="100px" heigth="800px">
        <br>
        <img src="1.jpg" width="100px" heigth="800px">
        <br>
    </marquee>
</body>
</html>

Eğer resimlerin arasına boşluk olmasını istiyorsanız <br> kodu ile koyabilirsiniz. Ne kadar çok koyarsanız o kadar boşluk olur.

Kolay gelsin. Umarım işinize yaramıştır. 

Ali Yazal
1987'de Ankara'da dünyaya geldi. Küçük yaşlarda iken bilgisayar dünyasına adımını attı. Yaşın önemi yok dercesine yurtiçi ve yurtdışı programlar hazırladı. Halen bilgisayar programcısı olarak Ankara'da web programcılığı ile ilgili çalışmalarına devam ediyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

gerçekten çok güzel bir dersti hocam...:):kirp:
:D Çok güzel bir hazırlamışsınız. Bana örneğin resim kayarken veya yazı kayarken mouse ile üzerine geldimizde kayan yazıların durması için hangi kodlar kullanılıyor onu da buraya yazarsanız çok sevinriim ..
Sağa kayan yazı aradım googlede burayı buldum bayağı bilgi var. Ancak yazının boyutu nasıl değiştirilir ve yazı tipi nasıl değiştirilir (verdana, black gibi) bunlarda anlatılırsa ve bunlar eklenince mailadresime bir bilgi notu yollarsanız sevinirim. İyi çalışmalar
usta ellerine sağlık güzel olmus
abı bu kayan yazı spaces için kullanılabılıyo mu ?????????
bu yazılar spaces te de kullanılıyo mu
Ustaa.. Ne güzel olmuş burası yaa.. taa 96 lı yıllarda Frontpage ile yapardık bu akan yazıyı. sonra 2000 li yıllarda STV de görmüştüm yazıveremedim biryerlere. kaç senedir bu bilgiyi arıyordum. Hocam ellerine sağlık akşam akşam mutlu oldum valla yaa.. Neyse yeni çalışmalarıınızda başarılar dilerim kolay gelsin.. Adem ŞAHİN
Ya herhalde yazımın onaydan geçmesini beklemem lazımmış ben 2 tane gönderdim öyleyse. İlk birincisinde farkedememişim bende gönderilmedi zannetmiştim. Neyse kusura bakmayın artık. Operator arkadaş isterse 1. sini silebilir... Byesss
hocam eline sağlık süper olmuş ama font ve renklerle ilgili bir örnek olsa çok iyi olurdu
renk ve boyutu değiştirmek için css bilmeniz gerek css bölümünden boyut ve renk değiştirme derslerine bakın ve tablo içine class"renk" diye yazarak değiştirebilirsiniz yani örneğin yazı
Bütün kodlar çok güzel okulda gördük ama çok iyi anlayamamışım çok faydası oldu teşekkürler...
desi fireworkste kullanmak için ne yapmal1y1m
Çoook teşekkürler,faydalanıyorum,hayırlı günler!
pekı desemkı ben bu yazıların yanı kayan yazıların yerıne verıtabanından verı cekmek ıstıyorum ozaman ne yapmak lazım volkansam@hotmail.com
birazda flash dene sen çok iyi olur
dostum siz bunlarla uğraş mayın alın bi offis 2003 yükleyin front page ile muhteşem şeyler yapa bilirsiniz kayan yazı resim felan veya flash e tabi bilgisi olmayanlar indirmesin
çok güzel emeginize saglık gerçekten.
bu kayan yazıları ve resimleri veri tabanından almak istiyorum. Ne yapmam lazım.
TEK KELİMEYLE HARİKASINIZ
ders için çok teşekkürler
hala herhangi bir txt file dan güncelleme yapılarak kullanılmasına örnek bulamadım..:((
Çok güzel ve açıklayıcı. Teşekkürler
çokk ii çook işe yarar bi de solarak resim gelip gitmesi oldu mu tamamdır
çok yararlı nezamandır aradığım bir koddu bu dahada basidiymiş çok teşekkür ederim
hocam eline sağlık süper
Valla yazana çok tşk ederim html ödevim çok güzel olacak gibi=)
tesekkürler hocam ders icin.bende sitemde böle bisey yapıcaktım tam zamanında gördüm.
çok teşekkür ederim çok güzel olmuş
okulda bunları es geçtiler bizde:kirp:
son örnekteki kayan resimlerin üzerine mous ile gelince kaymanın durması için hangi kodu eklemeliyiz. Tşk
teşekkürler çok iyisiniz ama resimlerin üzerine geldiğimizde kaymanın durması için ne yapmamız gerekiyor acaba bilgi verebilirmisiniz teşekkürler
Alicim merhaba kayan yazıdaki titremeyi nasıl önleyebilir. emeğin için teşekkür ederim.
haluk1534 soruna cvp vereyim; <onMouseOver="this.stop()" onMouseOut="this.start()"> over üzene geldiğinde out üzerinden ayrıldığında
merhaba arkadaşlar şöyle dediklerinize baktımda ben de niye olmuyor tüm kodları eksiksiz giriyorum ama web sayfama resim falan hiçbir şey gelmiyor acaba bunun nedenini bileniz varmı çünkü çok denedim ama olmuyor acaba neyden kaynaklanılıyor bu durum sadece resim çerceleri ve bir x işareti görünüyor
Yazılar bitiyor, boşluk veriyor, tekrar baştan başlıyor...Periyodlar arası boşluğu nasıl sıfırlarız?
Merhaba siteme kayan resim eklemek istiyorum vermiş olduğunuz bilgiler doğrultusunda yapıyorum fakat kaydet dediğimde <marquee> yazısı otomatik silinip imc kısmı kaldığından sadece resim çıkıyor bunu nasıl düzeltebiirim?şimdiden teşekkürler.

Yukarı Git