Membuat teks berjalan dengan tag marquee

Untuk membuat teks berjalan digunakan tag <marquee>. Tag marquee diperkenalkan oleh Microsoft IE, jadi tag tersebut bukan merupakan bagian dari HTML maupun XHTML. Jika ingin membuat website yang mendukung HTML/XHTML maka kita harus menghindari penggunaan tag ini dan mencari alternatif pengganti dengan menggunakan flash, animasi atau javascript.

Untuk menuliskan tag marquee kedalam dokumen HTML adalah seperti berikut:

<marquee>konten</marquee>

Seperti judulnya "membuat teks berjalan" sebenarnya bukan cuma teks, namun untuk konten kode diatas dapat juga dimasukkan gambar, links, embed flash, iframe dsb.

Untuk pengaturan tampilan dari konten tersebut dapat menambahkan atribut-atribut pada tag marquee.

<marquee atribut>konten</marquee>

Dimana atribut-atribut dari marquee tersebut adalah sebagai berikut:

width, height, direction, behavior, scrolldelay, scrollamount, loop, bgcolor, hspace, vspace, style, title, id, class, datafld, dataformats, datasrc, language, truespeed.

Atribut-atribut untuk javascript

onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup, onfocus, onstart.

Contoh-contoh penggunaan tag dan atribut marquee

.

Standar tag marquee tanpa atribut

<marquee>Standar tag marquee tanpa atribut</marquee>

Standar tag marquee tanpa Atribut

Marquee dengan atribut direction

<marquee direction="up">marquee direction="up"</marquee>
<marquee direction="right">marquee direction="right"</marquee>
<marquee direction="down">marquee direction="down"</marquee>
<marquee direction="left">marquee direction="left"</marquee>

direction="up"

direction="right"

marquee direction="down"

marquee direction="left"

Marquee dengan atribut behavior

<marquee behavior="alternate">marquee behavior="alternate"</marquee>
<marquee behavior="scroll">marquee behavior="scroll"</marquee>
<marquee behavior="slide">marquee behavior="slide"</marquee>

marquee behavior="alternate"

marquee behavior="scroll"

marquee behavior="slide"

Marquee dengan atribut scrolldelay

<marquee scrolldelay="100">marquee scrolldelay="100"</marquee>
<marquee scrolldelay="200">marquee scrolldelay="200"</marquee>
<marquee scrolldelay="300">marquee scrolldelay="300"</marquee>

marquee scrolldelay="100"

marquee scrolldelay="200"

marquee scrolldelay="300"

Marquee dengan atribut scrollamount

<marquee scrollamount="10">marquee scrollamount="10"</marquee>
<marquee scrollamount="20">marquee scrollamount="20"</marquee>
<marquee scrollamount="30">marquee scrollamount="30"</marquee>

marquee scrollamount="10"

marquee scrollamount="20"

marquee scrollamount="30"

Marquee dengan atribut width

<marquee width="75%">marquee width="75%"</marquee>
<marquee width="30%">marquee width="30%"</marquee>

marquee width="75%"

marquee width="30%"

Marquee dengan atribut height

<marquee height="75%">marquee height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>

marquee height="75%"

marquee height="30"

Marquee dengan atribut bgcolor

<marquee bgcolor="red">marquee bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>

marquee bgcolor="red"

marquee bgcolor="#ddd"

Marquee dengan atribut style

<p><marquee style="padding:4px;font-size:160%;color:#0C9;background:#000;">Belajar HTML, CSS, Tips, Triks dan Tutorial<br />
<span style="font-size:86%;;color:#ff3;">https://internet-teknologi-informasi.blogspot.com</span></marquee></p>

Belajar HTML, CSS, Tips, Triks dan Tutorial

https://internet-teknologi-informasi.blogspot.com

Marquee dengan beberapa atribut

<p style="background: #366;text-align:center;padding:4px;font-size:160%;color:#0fc;">
<marquee direction="left" scrollamount="5" width="40%"><<< MACAM-MACAM</marquee>
<marquee direction="right" scrollamount="5" width="40%">MACAM-MACAM >>></marquee><br />
<marquee behavior="alternate" width="80" style="font-size:14px;color: #fff;" >Contoh Marquee</marquee></p>

<<< MACAM-MACAMMACAM-MACAM >>>

Contoh Marquee

Marquee dengan mouseover atribut

<marquee onmouseover="this.stop();" onmouseout="this.start();">Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui comment</marquee>

Ketika kita menggeser mouse ke area teks dibawah maka teksnya akan berhenti.

Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui comment

Marquee dengan gambar

Untuk gambar kita cupup memasukkan lokasi gambarnya dan lakukan pengaturan dengan atribut-atribut marquee tersebut.

<marquee><img src="../images/marquee1.jpg" /> <img src="../images/marquee2.jpg" /> <img src="../images/marquee3.jpg" /></marquee>

<marquee scrollamount="2" width="100" style="background:url(../images/marqueebg.jpg);"><img src="../images/marquee1.jpg" /><img src="../images/marquee2.jpg" /><img src="../images/marquee3.jpg" /></marquee>