Scrolling Text dengan Marquee

Membuat scrolling text anda bisa gunakan elemen MARQUEE. MARQUEE mempunyai beberapa atribut, di antaranya behavior=["scroll" (default) | "slide" | "alternate"], direction=["left" | "right" | "up" | "down"], dst.

Artikel ini tidak membahas tentang bagaimana fungsi atribut-atribut dari MARQUEE, tetapi hanya contohnya saja.

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE ketika MARQUEE di klik, dan ketika mouse dilepaskan maka MARQUEE akan berjalan kembali:

Ayo klik saya, tahan beberapa detik saja, lalu lepaskan klik anda.

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ONMOUSEDOWN="this.stop();" ONMOUSEUP="this.start();">Ayo klik saya, tahan beberapa detik saja, lalu lepaskan klik anda.</MARQUEE>

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE ketika pointer mouse berada tepat di atas MARQUEE, dan ketika pointer mouse keluar area MARQUEE maka MARQUEE akan berjalan kembali:

Silahkan MOUSEOVER di teks berjalan ini.

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ONMOUSEOVER="this.stop();" ONMOUSEOUT="this.start();">Silahkan MOUSEOVER di teks berjalan ini.</MARQUEE>

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE dan menjalankan MARQUEE menggunakan tombol:

Silahkan tekan tombolnya!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan tekan tombolnya!</P> </MARQUEE> <INPUT TYPE="button" VALUE="Stop Marquee" ONCLICK="document.getElementById('oMarquee').stop();"> <INPUT TYPE="button" VALUE="Start Marquee" ONCLICK="document.getElementById('oMarquee').start();">

Contoh berikut mengizinkan pengguna untuk menetapkan warna teks MARQUEE sendiri:

Silahkan memilih warna!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan memilih warna!</P> </MARQUEE> <INPUT TYPE="color" VALUE="#000000" ONCHANGE="document.getElementById('oMarquee').style.color=this.value;">

Contoh berikut mengizinkan pengguna untuk menetapkan latarbelakang MARQUEE sendiri:

Silahkan memilih warna!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan memilih warna!</P> </MARQUEE> <INPUT TYPE="color" VALUE="#000000" ONCHANGE="document.getElementById('oMarquee').style.backgroundColor=this.value;">

Contoh berikut mengizinkan pengguna untuk menetapkan besar huruf untuk teks MARQUEE sendiri:

Silahkan menentukan ukuran teks saya!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan menentukan ukuran teks saya!</P> </MARQUEE> <INPUT TYPE="number" VALUE="13" ONCHANGE="document.getElementById('oMarquee').style.fontSize=this.value+'px';">

Contoh berikut mengizinkan pengguna untuk mengganti teks MARQUEE sendiri:

Silahkan ganti teks saya!

Tuliskan teks baru di sini!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan ganti teks saya!</P> </MARQUEE> <TEXTAREA ONCHANGE="document.getElementById('oMarquee').innerHTML=this.value;">Tuliskan teks baru di sini!</TEXTAREA>

Jika ingin membuat scrolling image, tempatkan IMG di dalam MARQUEE, contohnya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left"> <IMG SRC="myImage.png" WIDTH="100" HEIGHT="100"> </MARQUEE>