Elegant Rose - Working In Background Suka Dan Duka Dikongsi Bersama: Tutorial - Cara Buat Gambar Bergerak (Scrolling Image)

Pembaca Setia Blogku

Rafiera Network Supply - RNS

Rafiera Network Supply - RNS
Pembekal Barangan Usahawan - Click Picture To Go Website

Friday, September 7, 2012

Tutorial - Cara Buat Gambar Bergerak (Scrolling Image)


Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.







Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kod bagi scrolling image adalah seperti berikut.


<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget

P/S : Nanty mesty ada yang x pandai... biar Rafi bagitau awal2 k... waktu masukkan kod ni.. pastikan jgn dikedudukan "compose" tukar sekejap kat "HTML" (sebelah compose je)...
Stumble
Delicious
Technorati
Twitter
Digg
Facebook
Yahoo
Feed

No comments:

Post a Comment

♥ Tinggalkan Jejak anda disini ♥

Related Posts Plugin for WordPress, Blogger...