Halaman ini berisi contoh penggunaan kode HTML untuk membuat gambar berjalan (gambar berkerak) dengan atau tanpa life link sebagai bentuk animasi yang sederhana.
Meskipun demikian, gambar berjalan ini dapat dimanfaatkan sebagai salah satu bentuk tampilan sebuah iklan atau galeri produk. Apabila gambar yang akan ditampilkan memiliki kapasitas file yang tidak terlalu besar, maka penggunaan kode HTML seperti ini tidak akan memberatkan loading halaman terkait.
Penulisan kode HTML untuk gambar berjalan ini sama persis dengan penulisan kode HTML untuk teks berjalan yaitu dengan diawali tag <marquee> dan diakhiri dengan </marquee>. Adapun attribut yang berhubungan dengan marquee sendiri, lebih jelasnya dapat dilihat pada halaman Running Text di antaranya width, height, color, direction, bgcolor, font face, scrolldelay, scrollamount, loop dan sebagianya.
Contoh 1 :
Kode HTML untuk membuat gambar berjalan dari arah kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background putih adalah sebagai berikut :
Tampilan setelah diposting :
Contoh 2 :
Kode HTML untuk membuat gambar berjalan dari arah kiri ke kanan dengan tinggi area 118px, lebar area 100% di atas background kuning adalah sebagai berikut :
Tampilan setelah diposting :
Contoh 3 :
Kode HTML untuk membuat gambar berjalan bolak-balik dari kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background biru adalah sebagai berikut:
Tampilan setelah diposting :
Contoh 4 :
Kode HTML untuk membuat gambar berjalan dari kanan ke kiri dimana gambar tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.
Tampilan setelah diposting :
Bila ingin bergerak dari kiri ke kana tinggal ganti saja direction="right"
Contoh 5 :
Kode HTML untuk membuat gambar berjalan dari atas ke bawah dimana gambar tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.
Tampilan setelah diposting :
Bila ingin bergerak dari atas ke bawah tinggal ganti saja direction="down",
scrollamount adalah kecepatan gerakan makin tinggi nilainya maka semakin cepat gerakannya.
Catatan Penting :
Reff : http://www.linksukses.com
Meskipun demikian, gambar berjalan ini dapat dimanfaatkan sebagai salah satu bentuk tampilan sebuah iklan atau galeri produk. Apabila gambar yang akan ditampilkan memiliki kapasitas file yang tidak terlalu besar, maka penggunaan kode HTML seperti ini tidak akan memberatkan loading halaman terkait.
Penulisan kode HTML untuk gambar berjalan ini sama persis dengan penulisan kode HTML untuk teks berjalan yaitu dengan diawali tag <marquee> dan diakhiri dengan </marquee>. Adapun attribut yang berhubungan dengan marquee sendiri, lebih jelasnya dapat dilihat pada halaman Running Text di antaranya width, height, color, direction, bgcolor, font face, scrolldelay, scrollamount, loop dan sebagianya.
Contoh 1 :
Kode HTML untuk membuat gambar berjalan dari arah kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background putih adalah sebagai berikut :
<marquee bgcolor="#ffffff" direction="left" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-1" />
</marquee>
<img src="URL Gambar-1" />
</marquee>
Tampilan setelah diposting :
Contoh 2 :
Kode HTML untuk membuat gambar berjalan dari arah kiri ke kanan dengan tinggi area 118px, lebar area 100% di atas background kuning adalah sebagai berikut :
<marquee bgcolor="#ffff00" direction="right" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-2" />
</marquee>
<img src="URL Gambar-2" />
</marquee>
Tampilan setelah diposting :
Contoh 3 :
Kode HTML untuk membuat gambar berjalan bolak-balik dari kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background biru adalah sebagai berikut:
<marquee behavior="alternate" bgcolor="#0000ff" height="118px" scrollamount="5" width="100%">
<img src="URL Gambar-3" />
</marquee>
<img src="URL Gambar-3" />
</marquee>
Tampilan setelah diposting :
Contoh 4 :
Kode HTML untuk membuat gambar berjalan dari kanan ke kiri dimana gambar tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.
<marquee align="left" bgcolor="#c9fbd3" direction="left" height="118" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">
<a href="Link URL-1"><img src="URL Gambar-1" /></a>
<a href="Link URL-2"><img src="URL Gambar-2" /></a>
<a href="Link URL-3"><img src="URL Gambar-3" /></a>
</marquee>
<a href="Link URL-1"><img src="URL Gambar-1" /></a>
<a href="Link URL-2"><img src="URL Gambar-2" /></a>
<a href="Link URL-3"><img src="URL Gambar-3" /></a>
</marquee>
Tampilan setelah diposting :
Bila ingin bergerak dari kiri ke kana tinggal ganti saja direction="right"
Contoh 5 :
Kode HTML untuk membuat gambar berjalan dari atas ke bawah dimana gambar tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.
<marquee behavior="scroll" bgcolor="#c9fbd3" direction="up" height="300" scrollamount="3" width="150"><img src="http://i853.photobucket.com/albums/ab94/sijarot/gamesalfanetblogspotcom/vanilla-ice-cream.jpg" /> <img src="http://i853.photobucket.com/albums/ab94/sijarot/gamesalfanetblogspotcom/swirl-ice-cream.jpg" /><img src="http://i853.photobucket.com/albums/ab94/sijarot/gamesalfanetblogspotcom/tinklebell-cupcake.jpg" /></marquee>
Tampilan setelah diposting :
Bila ingin bergerak dari atas ke bawah tinggal ganti saja direction="down",
scrollamount adalah kecepatan gerakan makin tinggi nilainya maka semakin cepat gerakannya.
Catatan Penting :
- #FFFF00 adalah kode keksadesimal untuk warna kuning, #C9FBD3 adalah kode heksadesimal untuk warna hijau muda, #0000FF adalah kode heksadesimal untuk warna biru dan seterusnya. Lebih lengkapnya dapat dilihat pada artikel sebelumnya mengenai kode warna.
- Ganti semua URL Gambar (URL Gambar-1, URL Gambar-2, dan URL Gambar-3) dengan URL gambar Anda sendiri.
- Ganti semua Link URL (Link URL-1, Link URL-2, dan Link URL-3) sesuai kebutuhan.
Reff : http://www.linksukses.com
ConversionConversion EmoticonEmoticon