Pada postingan kali ini saya akan berbagi tips bagaimana cara membuat gambar berjalan dengan menggunakan kode HTML.

Pada prinsipnya kode HTML untuk membuat gambar berjalan di blog sama dengan membuat text berjalan seperti sudah dijelaskan pada postingan sebelumnya yaitu dengan menggunakan tag pembuka <marquee> dan diakhiri dengan </marquee>.

Adapun untuk mempercantik tampilan gambar berjalan dalam blog kita bisa menggunakan atribut yang dapat digunakan untuk tag <marquee> antara lain atribut: width, height, color, direction, bgcolor, font face, scrolldelay, scrollamount, loop dan sebagianya.

pada postingan kali ini saya berikan contoh penggunaan kode HTML untuk membuat gambar berjalan segagai berikut:

<marquee align="left" bgcolor="cfd9ef" direction="left" height="160" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">
<a href="http://www.jual-rebanamarawis.com/2012/05/jual-paket-marawis-polos.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5qaMiM-Ws2ZieHykwevLNfFJ7R9B1_n7MZU1C_N4vTQittn3yUHVuMubOlm1Y2ihpmB1J_0Ho_pA_mlTHX5MNXCJjUm7gtnLdHVGSbpd59crU-SHnJJM7PIIqb0Tp-rKvHoC-XclyBM/s400/1-SET-MARAWIS-BATIK.png" /></a>
<a href="http://www.jual-rebanamarawis.com/2012/05/jual-paket-marawis-batik.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMnDVrr9qKZ-HXtzFiEkQHGIaarr94qXrwmId9xmRpYNeTM4TvHJ1kU0XT0Kbp2N0c6tsZDpLmuvi3krxodkJAFmi976GMMhK0EH1-m3zEtUkgJcZ-JsbPNG7zl-lsDTzMtLzwe9DssV0/s400/1-SET-MARAWIS-POLOS.png" /></a> 
<a href="http://jual-rebanamarawis.com/2012/02/hadroh-standard-quality.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-V4Dn27J8xmWzsgl6Rv-VdpY10yEFy_hfscN_TrpzXGIkqusb31lGLNurXbe5_luT1UhAWL-RHuWJ9Pbad0sErS1-XHqBuSBN3QoaSLS3WGFPsFBc2w7QqBRhSER9L1bKPMHLJa6tmvM/s400/1-set-HADROH-STANDAR%252B-tas.png" /></a>
<a href="http://jual-rebanamarawis.com/2012/02/hadroh-super-quality.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUJsqLX1nqcAmYnBSGhOquxzG-tnUTeqKsSOVtf_MLw9mmrR3EhCaHkCYBsRKfcVbtmMpebG14TW0C02uOWvzaMvp0grIEyr7EDFi1T6TL07aQdqwiKjrvACzxGsnw4W2fv0VXXBVbvE/s400/1-SET-HADROH-SUPER.png" /></a> 
<a href="http://www.jual-rebanamarawis.com/2012/02/rebana-qosidah.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOVa0yJLscwdxb8kdlOZc_FSGNDI3M61QXCdTSJoy66P_Y77Qp1o7Mjs_MXtLj07fiaQzttaJ_S2CSFkawLb71RZnOs6V6UvtbDOrJ_LqyRf6Kj31sgham27XJk-rOOrloJnXVPTfGGo/s400/REBANA-QOSIDAH.png" /></a>
</marquee>

dan hasilnya akan tampak seperti gambar berikut:
Keterangan:
  • Atribut bgcolor="cfd9ef" berarti bahwa background yang digunakan berwarna biru muda seperti pada gambar di atas
  • Atribut  direction="left" berarti bahwa arah gerakan yang digunakan dari kanan ke kiri
  • Atribut height="160" berarti bahwa tinggi background dan gambar nya adalah 160 pixel.
  • Atribut onmouseout="this.start()" berarti bahwa gambar akan bergerak jika tidak di dekati mouse
  • Atribut  onmouseout="this.start()"pberarti pada saat mouse berada si atas gambar, bgerakan akan berhenti. 
  • Atribut scrollamount="5" menunjukkan kecepatan gerakan, semakin besar angka nya maka semakin cepat
  • Alamat url yang berwarna merah menunjukan alamat link tujuan / alamat yang akan dibuka jika gambar tersebut di klik
  • Alamat url yang berwarna biru  menunjukan alamat url dari gambar
Demikian postingan kali ini saya tentang cara membuat gambar berjalan dengan menggunakan kode HTML., semoga bermanfaat.