Prinsip dasarnya seperti ini :
Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee, sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di perlukan suatu kreatifitas agar kita bisa memadukannya.
membuat gambar bisa bergerak dengan marquee, sobat tinggal memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya (tidak berdempetan), sobat harus menyisipkan kode
diantara kode gambar untuk arah vertikal dan kode (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini
Saya berikan contoh, alamat foto yang saya miliki seperti ini :
<a href="http://s1086.photobucket.com/albums/j445/jemyalfarizi/?action=view&current=fathiefotoeditor.jpg" target="_blank"><img src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/fathiefotoeditor.jpg" border="0" alt="Photobucket"></a> <a href="http://s1086.photobucket.com/albums/j445/jemyalfarizi/?action=view&current=IMG0203Akkkk.jpg" target="_blank"><img src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/IMG0203Akkkk.jpg" border="0" alt="Photobucket"></a> |
Alamat kode/script diatas saya menggunakan image hosting layanan photobucket,banyak lagi layanan image hosting lainnya seperti ImageShack atau TinyPic. Untuk memperkecil ukuran gambar sobat tinggal memasukan atribut width="..." serta height="...". sesuai keinginan sobat,bisa juga dengan menggunakan software photoshop atau editing image lainnya.
Contoh resolusi gambar yang saya ubah dalam ukuran kecil :
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/fathiekecil.jpg" height="130" width="190" />
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/IMG0203Akkkkkecil.jpg"height="130" width="190" />
Sekarang kita coba memasukan kode gambar tersebut ke dalam marquee?
contoh dibawah kode marquee dengan variasi agar ketika mouse menyorot pada gambar berhenti,
kodenya seperti ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/fathiekecil.jpg" height="130" width="190" />
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/IMG0203Akkkkkecil.jpg"height="130" width="190" />
</marquee>
Jika ingin sedikit variasi bisa memakai bingkai. kodenya seperti ini : <table border="10" cellpadding="3" height="135" width="195"><tbody><tr><td> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center" height="132" width="192">
<a href="http://s1086.photobucket.com/albums/j445/jemyalfarizi/?action=view&current=IMG0203Akkkk.jpg" target="_blank"><img src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/IMG0203Akkkk.jpg" alt="Photobucket" border="0" />
</a>
<a href="http://s1086.photobucket.com/albums/j445/jemyalfarizi/?action=view&current=fathiefotoeditor.jpg" target="_blank"><img style="width: 197px; height: 333px;" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/fathiefotoeditor.jpg" alt="Photobucket" border="0" /></a>
</marquee> </td></tr></tbody></table>jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background kuning muda :
<table border="10" cellpadding="3" height="135" width="195" bgcolor="flaxen" /> <tr> <td> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/fathiekecil.jpg" height="130" width="190" />
<img alt="Photobucket" border="0" src="http://i1086.photobucket.com/albums/j445/jemyalfarizi/IMG0203Akkkkkecil.jpg"height="130" width="190" />
</marquee> </td> </tr> </table>NB : ganti teks warna hijau dengan kode/url gambar sobat.
Sampai disini saya rasa cukup,
Untuk melihat efek dari kode/script tersebut, silahkan sobat "klik disini"
