Image dalam Kode Marquee

Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah saya jawab melalui shoutbox/buku tamu pula. Akan tetapi sebuah jawaban singkat saja mungkin tidak akan dapat mewakilinya, dan agar jawabannya dapat di cerna dengan mudah sengaja saya tuangkan ke dalam artikel ini.

Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke 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 <br/> 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" />

hasilnya seperti ini :








yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130 pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :

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

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

Maka hasilnya akan seperti ini :






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>

Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !

Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, kang Rohman rekomendasikan anda belajar di sini   «« sok atuh di klik biar situsnya keluar

Jika anda merasa artikel ini bermanfaat, silahkan lakukan vote ke Lintas Berita agar artikel ini bisa di baca oleh orang lain.

Berlangganan via RSS Feed

Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.

Privacy guaranteed. We'll never share your info.

Posting lain yang mungkin ingin anda baca :