Cara Penggunaan Marquee pada HTML

Cara Membuat Teks Berjalan (Marquee) dengan HTML

22:02  HTML  No comments

Teks atau objek berjalan biasa disebut Marquee dalam html. Teks atau obek ini akan bergerak pada suatu halaman web dengan arah dan perilaku tertentu.  Sintaksnya adalah:

<marquee> ............................</marquee>

Contoh:

<marquee> Selamat Datang di Website Kami </marquee>

Hasilnya adalah:

Tampak pada gambar di atas bahwa marquee yang dibuat berjalan dari kiri ke kanan.

Marquee dapat dibuat sesuai dengan kehendak kita. Maksudnya adalah kita dapat merubah arah misalnya dari kanan ke kiri, atas ke bawah dan sebaliknya, bergerak mondar-mandir, dan lain sebagainya. Agar hal itu tercapai, maka kita harus menambahkan properti pada marquee yang kita buat. Properti yang dimaksud adalah:

• Arah marquee (direction), misalnya kanan (right), atas (up), bawah (down). Arah standar adalah dari kanan ke kiri. Sintaksnya adalah direction="arah" contoh: direction="up"
• Tingkah laku marquee (behavior), adalah suatu cara bagaimana marquee itu berjalan, misalnya mengulang searah teks (scroll), teks/objek dalam marquee digulung (slide) ataupun berjalan mondar-mondir (alternate). Sintaksnya adalah behavior="jenis tingkah laku" contoh: behavior="scroll"
• Tinggi marquee (height). Dengan properti ini kita dapat membatasi pada tinggi berapa marquee akan menempati suatu halaman web. Tinggi marquee ini diukur dengan persen (%) atau pixel (px). Sintaksnya adalah: height="nilai tinggi" contoh: height="100px"
• Lebar marquee (widht). Sama halnya dengan tinggi marquee, lebar diukur dengan persen (%) atau pixel (px). Sintaksnya adalah: width="nilai lebar" contoh: width="100px"

Contoh marquee dengan properti di atas sebagai berikut:

<marquee direction="up" behavior="scroll" height="100px" width="100px"> Selamat Datang di Website Kami</marquee>

Hasilnya sebagai berikut:

Kita dapat juga menambahkan properti lain misalnya Warna Latar (bgcolor), yakni warna pada latar maruee. Sintaksnya: bgcolor="jenis warna" contoh: bgcolor="red" atau bgcolor="#FF0000" (Warna dapat berupa nama warna ataupun dalam triplet hexadecimal)

Contoh Penggunaan

<marquee bgcolor="red" direction="up" behavior="scroll" height="200px" width="100px"> Selamat Datang di Website Kami</marquee> 

Hasilnya:

Marquee di atas teks berjalan sangat cepat atau juga mungkin sangat lambat. Untuk mengatur kecepatan marquee bergerak, kita dapat menambahkan properti jumlah gulir atau scrollamount yang diukur dengan angka, misalnya scrollamount="1".

Contoh:

<marquee bgcolor="red" direction="up" behavior="scroll" height="200px" width="100px" scrollamount="1"> Selamat Datang di Website Kami</marquee>

Hasilnya:

Gambar di atas bergerak terus-menerus. Kita membuat teks/objek dalam marquee berhenti bergerak saat pengunjung mendekatkan kursor mouse dan akan bergerak lagi saat kursor mouse dilepaskan. Sintaksnya adalah:

onmouseover="this.stop()" onmouseout="this.start()"

Contoh penggunaan:

<marquee bgcolor="red" direction="up" behavior="scroll" height="200px" width="100px" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()"> Selamat Datang di Website Kami</marquee>

Hasilnya:

Catatan:
Anda dapat menambahkan properti lain lagi terutama pada font yang digunakan. Baca artikel sebelumnya mengenal tag font dan warna dalam html.