Marquee code html scrolling image

Masih dalam marquee, pada posting yang sebelumnya Code HTML marquee teks, bedanya disini adalah yang bergerak adalah image / gambar yang saya pakai pada contoh image bergerak dengan format file gif. kamu bisa mengganti image tersebut dengan mengganti pada code Scr="URL" dengan format jpg / png. tanpa banyak kata kita lihat di bawah ini :

Dari kanan ke kiri
Slide-In Images :
Code :

<marquee behavior="slide" direction="left"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8LZu2gOXIB0tmp2-ubo58e5bjiecXeLJ0S5PXukMlaQvGNArbn07ieWWe7UeusdPC0J7-rhkaMrdwDBZzn-Z3cqagOkY72XVJAwkKoufsrW1yJQrPBFNqxga_vm0hjAxGiN_rMU7-0g9/s1600/nari.gif" /></marquee>

Preview :

---

Continuous Image Scroll
Code :

<marquee behavior="scroll" direction="left"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8LZu2gOXIB0tmp2-ubo58e5bjiecXeLJ0S5PXukMlaQvGNArbn07ieWWe7UeusdPC0J7-rhkaMrdwDBZzn-Z3cqagOkY72XVJAwkKoufsrW1yJQrPBFNqxga_vm0hjAxGiN_rMU7-0g9/s1600/nari.gif" /></marquee>

Preview :

---

Faster Scrolling
Code :

<marquee behavior="scroll" direction="left" scrollamount="30"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8LZu2gOXIB0tmp2-ubo58e5bjiecXeLJ0S5PXukMlaQvGNArbn07ieWWe7UeusdPC0J7-rhkaMrdwDBZzn-Z3cqagOkY72XVJAwkKoufsrW1yJQrPBFNqxga_vm0hjAxGiN_rMU7-0g9/s1600/nari.gif" /></marquee>

Preview :

---

Dari kir ke kanan
Slide-In Images :
Code :

<marquee behavior="slide" direction="right"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNj9Vgnx0ecOuzjitD9XhrXOlYaebdjG68326SvVO-cbsjbhaBW7083QwTTKw-xPy1t4nWtbNun_MRb4k1xuq3yLTCu8SHic-txxZGol6xR1Y-gOrZTXV-gL_PfUm5N8LrValyfbuTxpjs/s1600/melangkah.gif" /></marquee>

Preview :

---

Continuous Image Scroll
Code :

<marquee behavior="scroll" direction="right"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNj9Vgnx0ecOuzjitD9XhrXOlYaebdjG68326SvVO-cbsjbhaBW7083QwTTKw-xPy1t4nWtbNun_MRb4k1xuq3yLTCu8SHic-txxZGol6xR1Y-gOrZTXV-gL_PfUm5N8LrValyfbuTxpjs/s1600/melangkah.gif" /></marquee>

Preview :

---

Faster Scrolling
Code :

<marquee behavior="scroll" direction="right" scrollamount="30"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNj9Vgnx0ecOuzjitD9XhrXOlYaebdjG68326SvVO-cbsjbhaBW7083QwTTKw-xPy1t4nWtbNun_MRb4k1xuq3yLTCu8SHic-txxZGol6xR1Y-gOrZTXV-gL_PfUm5N8LrValyfbuTxpjs/s1600/melangkah.gif" /></marquee>

Preview :

---

Memantul
Code :

<marquee behavior="alternate" direction="right"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpRLxydYOhfA-ymSN2WGVD6g99FkWl_jNoLdLDJJMLE1xrt4nSfMq8CdyPg9Mih5p29UqlHcK0eWwG2cXyGMhk5x5C3ycZTyYUxtDWVuM7Hv8Tn7Qv3LbKGtb5u8CE14l2Ivp6Q4awSd_/s1600/huhuy.gif" width="82" /></marquee>

Preview :

---

Faster memantul
Code :

<marquee behavior="alternate" direction="right" scrollamount="30"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpRLxydYOhfA-ymSN2WGVD6g99FkWl_jNoLdLDJJMLE1xrt4nSfMq8CdyPg9Mih5p29UqlHcK0eWwG2cXyGMhk5x5C3ycZTyYUxtDWVuM7Hv8Tn7Qv3LbKGtb5u8CE14l2Ivp6Q4awSd_/s1600/huhuy.gif" width="82" /></marquee>

Preview :

---

Scroll dari bawah ke atas
Code :

<marquee behavior="Scroll" direction="up"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpRLxydYOhfA-ymSN2WGVD6g99FkWl_jNoLdLDJJMLE1xrt4nSfMq8CdyPg9Mih5p29UqlHcK0eWwG2cXyGMhk5x5C3ycZTyYUxtDWVuM7Hv8Tn7Qv3LbKGtb5u8CE14l2Ivp6Q4awSd_/s1600/huhuy.gif" width="82" /></marquee>

Preview :

---

Scroll dari atas ke bawah
Code :

<marquee behavior="Scroll" direction="down"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpRLxydYOhfA-ymSN2WGVD6g99FkWl_jNoLdLDJJMLE1xrt4nSfMq8CdyPg9Mih5p29UqlHcK0eWwG2cXyGMhk5x5C3ycZTyYUxtDWVuM7Hv8Tn7Qv3LbKGtb5u8CE14l2Ivp6Q4awSd_/s1600/huhuy.gif" width="82" /></marquee>

Preview :

---

Memantul dinding kolom
Code :

<marquee behavior="alternate" bgcolor="black" direction="up" height="200" scrollamount="2" scrolldelay="10" width="100%"><marquee behavior="alternate" direction="left" scrollamount="2" scrolldelay="10"><img alt="nari" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpRLxydYOhfA-ymSN2WGVD6g99FkWl_jNoLdLDJJMLE1xrt4nSfMq8CdyPg9Mih5p29UqlHcK0eWwG2cXyGMhk5x5C3ycZTyYUxtDWVuM7Hv8Tn7Qv3LbKGtb5u8CE14l2Ivp6Q4awSd_/s1600/huhuy.gif" width="82" /></marquee></marquee>

Preview :

---

Atribut yang sering di gunakan adalah :

* BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

* DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks


* BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
o Scroll --> teks bergerak berputar
o Slide--> teks bergerak sekali lalu berhenti
o Alternate --> teks bergerak dari kiri kekanan lalu balik lagi
(bolak-balik)

* TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

* SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar
angka semajin cepat gerakannya.

* SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

* LOOP="angka|-1|infinite" --> Mengatur jumlah loop

* WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Kamu tinggal COPAS saja kodenya cukup mudah bukan dan lihat hasilnya...... ? kayanya terlalu panjang ni postingan Ok saya tutup sampai disini dulu untuk pembelajaran kode HTML tunggu postingan berikutnya..

---

Tutorial Terkait

Apa itu HTML ?
HTML Scroll Box
HTML Scroll Box Colors
HTML Picture Scroll Box
HTML Scroll Box Horizontal
HTML Scroll Box Vertikal
HTML Scroll Box Border

Posted in: Marquee HTML Code,Tutorial Code Html