Penulisan kode HTML untuk gambar berjalan ini sama persis dengan penulisan kode HTML untuk teks berjalan yaitu dengan diawali tag <marquee> dan diakhiri dengan </marquee>. Adapun attribut yang berhubungan dengan marquee sendiri, lebih jelasnya dapat dilihat pada halaman Running Text di antaranya width, height, color, direction, bgcolor, font face, scrolldelay, scrollamount, loop dan sebagianya.
Contoh 1 :
Kode HTML untuk membuat gambar berjalan dari arah kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background putih adalah sebagai berikut :
<marquee bgcolor="#ffffff" direction="left" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-1" />
</marquee>
Contoh 2 :
Kode HTML untuk membuat gambar berjalan dari arah kiri ke kanan dengan tinggi area 118px, lebar area 100% di atas background kuning adalah sebagai berikut :
<marquee bgcolor="#ffff00" direction="right" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-2" />
</marquee>
Contoh 3 :
Kode HTML untuk membuat gambar berjalan bolak-balik dari kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background biru adalah sebagai berikut:
<marquee behavior="alternate" bgcolor="#0000ff" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-3" />
</marquee>
Contoh 4 :
Kode HTML untuk membuat gambar berjalan dari kanan ke kiri dimana gambar tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.
<marquee align="left" bgcolor="#c9fbd3" direction="left" height="118" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">
<a href="Link URL-1"><img src="URL Gambar-1" /></a>
<a href="Link URL-2"><img src="URL Gambar-2" /></a>
<a href="Link URL-3"><img src="URL Gambar-3" /></a>
</marquee>
Catatan Penting :
- #FFFF00 adalah kode keksadesimal untuk warna kuning, #C9FBD3 adalah kode heksadesimal untuk warna hijau muda, #0000FF adalah kode heksadesimal untuk warna biru dan seterusnya. Lebih lengkapnya dapat dilihat pada artikel sebelumnya mengenai kode warna.
- Ganti semua URL Gambar (URL Gambar-1, URL Gambar-2, dan URL Gambar-3) dengan URL gambar Anda sendiri.
- Ganti semua Link URL (Link URL-1, Link URL-2, dan Link URL-3) sesuai kebutuhan.