Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

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 :



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&quot; height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg&quot; 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&quot; height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg&quot; 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 !

15 Juli 2007 - Posted by | blog tutorial, membuat marquee

14 Komentar »

  1. Thanks alot,
    aku telah banyak menemukan ilmu dari Blog abang, terima kasih sekali lagi.
    Selamat beraktifitas and salam tuk keluarga abang semua.

    Komentar oleh Saifannur | 13 Agustus 2007 | Balas

  2. salam kenal! kang kalo pake firefox marque gambarnya ga mo jalan ya? tapi klo pake opera malah bisa? help me…

    Komentar oleh freeman | 7 Januari 2008 | Balas

  3. ok2… setelah membaca artikelna saya dah donk, thanks banyak.. hehehe…

    Komentar oleh freeman | 7 Januari 2008 | Balas

  4. kang, rohman saya sudah coba sesuai yang akang ajarin, cuman karena saya nya yg “katro” jd gatot alias gagal total, oya kang saya sudahnnyimpen gambar di photobucket.com, kalo yg punya kang rohman kan di pic50.picturetrail.com, apa ini yg bikin saya gagal ya kang, dibantu yang kang,hatur nuhun sateuacanna

    Komentar oleh AGHA | 24 Januari 2008 | Balas

  5. nembe mah abdi nyimpen gambar di alamat situs nu sami sareng akang, trus script html “marquee”na copy paste ti nu akang, tapi teu acan berhasil euy, punten kang nya, jd ngarepotkeun, abdi hoyong tiasa pisan yeuh

    Komentar oleh AGHA | 24 Januari 2008 | Balas

  6. kang saya udah coba upload tu gambar, nah truss dah saya ikutin saran akang tapi tetep gak mau jaalan, yang salah apanya ya kang mohon bantuannya..

    ni hasil Uploadtan gambar saya
    http://h1.ripway.com/dinan70/714528-DSC_0054.jpg
    http://h1.ripway.com/dinan70/667660-DSC_0315.jpg

    Komentar oleh jangkrik | 5 April 2008 | Balas

  7. woww.. ini yang saya cari…
    makasih ya. bagus bgt blog nya. berguna untuk orang laen.. terutama untuk saya yang lemot banget ttg blog.. hehe

    Komentar oleh DisiniDesy | 30 April 2008 | Balas

  8. Kang, marque untuk udah aku coba dan sukses. Bisa jalan. Tapi pas aku coba gambarnya aku pasang link kok ga jalan marquenya. Apa emang marque ga bisa jalan untuk chicklet. Tolong bimbingannya. Makasih

    Komentar oleh Duit Gratisan | 10 Mei 2008 | Balas

  9. Terima kasih sudah membagi ilmunya!!!
    Kang, saya udah coba upload foto di photobucket.com, terus bikin marquee sesuai dengan yang Akang ajarkan, tapi kok gambarnya ga muncul ya?–Terima kasih lagi ….

    Komentar oleh asih | 21 Juli 2008 | Balas

  10. Horeeee …. Kang, setelah saya coba lagi, akhirnya bisa!!! Ternyata kalau pakai photobucket.com, kode yang harus dimasukkan sedikit berbeda dengan yang Akang ajarkan. Sekali lagi, terima kasih telah berbagi ilmunya!!!

    Komentar oleh asih | 21 Juli 2008 | Balas

  11. tank’s mas to ilmunya

    Komentar oleh Apex Baransano | 29 Agustus 2008 | Balas

  12. It’s cool bro !!! luar biasa

    Komentar oleh Heri | 18 November 2008 | Balas

  13. makasih atas infonya…

    Komentar oleh Ardian | 24 Desember 2008 | Balas

  14. tapi gak run di wordpress

    Komentar oleh Ardian | 24 Desember 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: