Gambar Berjalan dengan HTML
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 :
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.
24 comments:
Kalau ada huruf Marquee begini saya jadi ingat iklan reklame berjalan di pertokoan. He...He....
Wah, sepertinya ada yang sedikit berubah pada desain Link Sukses. Makin cantik saja, Mas Yuda blognya. Kalau ditambahi apa itu, hower ya?
Makasih tutorialnya. Walaupun dipostingan jabarview dot com sy pernah baca elemen marquee tdk dianjurkan lagi pemakaiannya untuk web design tapi tdk ada salahnya bagi yg ingin menggunakannya krn bgm tampilan terindah/trbk suatu web bg stp org berbeda2.
Iya sy jg merasa tampilan blog ini makin cantik tdk sj dgn effect hover tp image yg bgs hasil dr photoshop ya? Pgn jg bs photoshop?
Maaf sering berkunjung tp lupa komentar krn biasax online pakai hp.
Mbak Amatullah, penggunaan elemen marquee (apalagi yang berlebihan) memang bisa menimbulkan distraksi. Namun bukan berarti tidak boleh digunakan sama sekali.
Elemen seperti ini sangat sering saya lihat terutama pada situs-situs berita berupa news ticker.Elemen ini. menurut saya bisa menegaskan ciri khas dari situs-stus tersebut. Itulah sebabnya, setiap saya mendapatkan blog dengan elemen marquee ini, saya selalu teringat akan situs-situs berita. :)
Jika elemen ini digunakan, maka ada baiknya dibuat sedemikian rupa agar pengguna dimungkinkan untuk melakukan pause/unpause.
Salam...
Trik yang bagus nih buat newbie seperti saya.... kayaknya bagus juga buat bikin bannner dengan kode html....
cucok nih buat blogku,,,,,,
heheheh
mas Yuda selalu mengerti oby <== PD banget nih orang XD
emang asik kalo ada yang gerak2 di blog kita, pengunjung jadi gag bosen bacanya..
Mantap nich...
Tulisan jalan
Mantap Cuy
izin copaz yah.......
http://www.manrengat.co.cc
Mohon ijin ikut belajar disini !!!
Trims, untuk mengisi / mengganti image aku harus buka MySpaceGens, silakan teman-teman bisa mencobanya
aku juga pake yang itu bozz
silahkan dicek yaw.. :)
terima kasih kawan infonya bermanfaat
tq bro atas postingannya...dipraktekkan dulu. Buat teman-teman yang mau liat hasilnya bisa dilihat di:
http://shareonme.blogspot.com
Mantap.
terimakasih atas informasinya yah???
Thank gan atas infonya...pas sama yang dibutuhkan...cucokkk
nyari yang bisa berhenti di tiap gambar nich.... ada yang tau ngga???
gimana caranya supaya gambarnya jalan dengan panah yang kita klik??
@Anonim : Untuk keperluan tersebut dapat menggunakan javascript atau jquery tetapi maaf saya bukan ahli dibidang keduanya.
makasih gan ilmunya.... mampir ke web ana gan,...... ditunggu....
100% keren gan postingnya,saya dah &berhasil tpi gmana caranya untk gmbr berjlnnya ngada jedah/nyambung terus,trima kasih sebelumnya
hajjar.sd@gmail.com
100%keren Gan,postingnya saya sdah cba and berhasil tpi kok ada jedah/gambarnya muncul terus menerus tnpa ada jeda
hajjar.sd@gmail.com
@Gallery : Coba dengan browser lain. Tetapi semua itu sebenarnya dapat diedit dengan Javascript.
betul mas yuda,tpi pkai tag ap yah untk ,misal ABC.....ABC...ABC untuk bisa jadi menampilkan ABCABCABC itu pakai apayah,saya sudah coba beberapa cara tpi tetep nihil,
hajjar.sd@gmail
Terimakasih sebelumnya
@galery: Maaf, kalau boleh tahu contoh situs yang menampilkan animasi seperti itu apa ya?, Nanti saya pelajari. Thanks.
Poskan Komentar
Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.