image dalam kode marquee

Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode marquee.

Prinsip dasarnya seperti ini :

<marquee>

Teks, links, gambar, atau apa saja yang ingin di masukan.

</marquee>


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.

Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias setiap sudut halaman blog menggunakan kode marquee.

Kembali lagi ke bahasan utama yaitu 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 &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini --> & n b s p ; tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya miliki seperti ini :
http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg

http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg


Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />
Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?

Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot pada gambar berhenti, maka kodenya akan seperti ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />
<br/><br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>
Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai bingkai. kodenya seperti ini :

<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>
</td>
</tr>
</table>


Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background biru muda :

<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>
</td>
</tr>
</table>