Tutorial - Buatkan Gambar Bergerak Menggunakan HTML Marquee Tag

Tutorial - Bagaimana nak Buatkan Gambar Bergerak-gerak?

Dalam tutorial sebelum ni, saya pernah tunjukkan korang cara untuk menggerakkan perkataan menggunakan marquee tag. Dalam tutorial kali ni pula, saya akan mengajar cara untuk menggerakkan gambar, serta memberhentikannya apabila pointer mouse pointing ke arah gambar. Caranya lebih kurang sama dengan menggerakkan perkataan, cuma perlu ditambah beberapa benda.

1. Gambar bergerak yang single
<marquee direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="10"> <a href="Link Korang"><img border="0"  src="Link Gambar Korang" height="50" width="50" /></a></marquee>

2. Gambar bergerak bersebelahan

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5"><a href="Link Korang"><img border="0" src="Link Gambar Korang" height="50" width="50" /></a> <a href="Link Ke 2 Korang"><img border="0" src="Link Gambar Ke 2 Korang" width="50" height="50" /></a> </marquee>

3. Gambar bergerak di bawah

<marquee direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5"> <br /> <a href="Link Korang"><img border="0" src="Link Gambar Korang" height="50" width="50" /></a> <br /> <a href="Link ke 2 Korang"><img border="0" src="Link Gambar Ke 2 Korang" height="50"  width="50" /></a> </marquee>

4. Ini merupakan kod yang saya gunakan untuk membuat teks bergerak seperti yang di atas

<marquee behavior="alternate" direction="" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="30" width="600"> <a href="Link Korang" target="_blank"> <img border="0"  src="Link Gambar Korang" height="50" width="50" /></a></marquee>

Apa yang korang perlu buat cuma beberapa perubahan untuk sesuaikan kod ini dengan kemahuan korang:

• Gantikan teks yang bewarna kuning untuk mengubah arah gambar bergerak. (up, down, right, left)
• Tag yang bewarna biru merupakan kod untuk membuat gambar berhenti bergerak dan bergerak semula.
• Tukarkan nombor yang bewarna pink untuk mengubah kelajuan. (Makin tinggi nombor makin laju)
• Tukar nombor  pada tag yang bewarna hijau kepada saiz gambar yang hendak di gunakan (Tinggi x Lebar)
• Tukar Nombor yang bewarna Ungu untuk mengubah kelebaran teks korang bergerak.

EDITED*
Ada beberapa Cara untuk Masukkan kod ni, saya cuma akan tunjukkan 2 cara yang biasa digunakan :

1. Korang perlu, LOGIN > LAYOUT > Add a gadget > HTML / JavaScript >Paste kod tu di sini
2. Sekiranya korang nak buat gambar bergerak dalam post, LOGIN > NEW POST > pilih HTML> Paste kod tu di sini

Ok Done, Sekiranya korang masih x dapat masukkan, then :c korang kena baca lebih mengenai HTML

Sila komen di bawah kalau dah cuba.. Senyum :D

---

Sharing is caring ^_^

---