Belajar Tag Marquee / Tulisan Berjalan

Apa sebenarnya marquee ? Marquee adalah sebuah tag/kode dalam bahasa HTML yang dapat membuat sebuah objek seperti teks dan gambar bergerak secara horizontal maupun vertikal. Contoh bisa anda lihat pada tulisan selamat datang diatas. Untuk memulai marquee kita cukup menuliskan tag <marquee>…</marquee> pada halaman web.

Nah pengen tahu lebih dalam tentang marquee ? Kalau iya ayo kita simak artikel berikut
Marquee banyak digunakan pada untuk membuat ucapan selamat datang pada sebuah web. Kadang ada juga yang membuat untuk menampilkan blog roll pada sebuah blog. nanti terserah anda deh mau digunakan untuk apa. Hehehe….

Tag Marquee memiliki beberapa atribut untuk membuat marquee lebih cantik, diantaranya adalah :
BGCOLOR="color" ? digunakan untuk menambahkan warna latar belakang dari sebuah objek (teks, image, dll).
DIRECTION="left/right/up/down" ? digunakan untuk menentukan arah pergerakan dari marquee.
BEHAVIOR="scroll/slide/alternate" ? digunakan untuk mengatur jenis dari marquee.
NB :
Scroll ? objek selalu berputar.
Slide ? objek berputar sekali lalu berhenti.
Alternate ? objek bergerak ke kiri dan ke kanan secara berulang.
SCROLLAMOUNT="number" ? untuk mengatur kecepatan gerakan dalam satuan pixel (semakin besar angka semakin cepat gerakannya).
SCROLLDELAY="number" ? untuk mengatur waktu tunda gerakan dalam mili detik.
LOOP="number|-1|infinite" ? untuk mengatur jumlah loop.
WIDTH="number" ? untuk mengatur panjang/lebar dari marquee dalam satuan pixel (px) atau persen (%).
Sekarang kita coba menggunakan tag marquee :
Perintah dasar :
Ketikan perintah dibawah ini :


<marquee> Belajar menggunakan TAG Marquee. </marquee>

Belajar menggunakan TAG Marquee.



Jika ingin memasukkan gambar coba ketikan seperti ini :

<marquee><img alt="PCGURU Blog" src="http://pcguru.okihelfiska.net/icon/ads/pcguru_button.png" /></marquee>






Contoh berikut kita akan menambahkan atribut yang ada pada marquee.
Menambahkan atribut behavior : (secara default menggunakan scroll)

<marquee>Menggunakan Behavior SCROLL</marquee>
Menggunakan Behavior SCROLL

<marquee behavior="slide">Menggunakan Behavior SLIDE</marquee>

Menggunakan Behavior SLIDE

<marquee behavior="alternate">Menggunakan Behavior ALTERNATE</marquee>

Menggunakan Behavior ALTERNATE


Menambahkan atribut direction : (secara default bergerak dari kanan ke kiri)

<marquee>Menggunakan Direction LEFT</marquee>

Menggunakan Direction LEFT

<marquee direction="right">Menggunakan Direction RIGHT</marquee>
Menggunakan Direction RIGHT



Jika ingin menggunakan direction up dan down kita harus menambahkan atribut height terlebih dahulu.





<marquee direction="up" height="100">Menggunakan Direction UP</marquee>
Menggunakan Direction UP




<marquee direction="down" height="100">Menggunakan Direction DOWN</marquee>
Menggunakan Direction DOWN

Membuat Marquee Bergaya Ketikan

Langkah membuatnya anda tinggal copy kode di bawah ini

<script language="JavaScript1.2">
<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Secify scroller contents
var line=new Array()
line[1]="Selamat datang di otomotif and computer"
line[2]="kumpulan tutorial dan tips blogger..."
line[3]="enjoy its"

//Specify font size for scoller
var ts_fontsize="16px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="\"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>

Silahkan simpan dimana marqueenya ingin muncul dengan menambah elemen Java Script. Jangan lupa mengganti teks yang becetak tebal dengan yang anda inginkan. Selamat mencoba semoga bermanfaat.