Senin, 10 Desember 2012

►berbagai fungsi marquee◄


SELAMAT DATANG
Apa sebenarnya marquee ? Marquee adalah sebuah tag/kode dalam bahasa HTML yang dapat membuat sebuah objek seperti teks dan gambar bergerak secara horizontal maupun vertikal. Contoh bisa anda lihat pada tulisan selamat datang diatas. Untuk memulai marquee kita cukup menuliskan tag <marquee>…</marquee> pada halaman web.


Nah pengen tahu lebih dalam tentang marquee ? Kalau iya ayo kita simak artikel berikut :)
Marquee banyak digunakan pada untuk membuat ucapan selamat datang pada sebuah web. Kadang ada juga yang membuat untuk menampilkan blog roll pada sebuah blog. nanti terserah anda deh mau digunakan untuk apa. Hehehe….
Tag Marquee memiliki beberapa atribut untuk membuat marquee lebih cantik, diantaranya adalah :
BGCOLOR="color" ? digunakan untuk menambahkan warna latar belakang dari sebuah objek (teks, image, dll).
DIRECTION="left/right/up/down" ? digunakan untuk menentukan arah pergerakan dari marquee.
BEHAVIOR="scroll/slide/alternate" ? digunakan untuk mengatur jenis dari marquee.
NB :
Scroll ? objek selalu berputar.
Slide ? objek berputar sekali lalu berhenti.
Alternate ? objek bergerak ke kiri dan ke kanan secara berulang.
SCROLLAMOUNT="number" ? untuk mengatur kecepatan gerakan dalam satuan pixel (semakin besar angka semakin cepat gerakannya).
SCROLLDELAY="number" ? untuk mengatur waktu tunda gerakan dalam mili detik.
LOOP="number|-1|infinite" ? untuk mengatur jumlah loop.
WIDTH="number" ? untuk mengatur panjang/lebar dari marquee dalam satuan pixel (px) atau persen (%).
Sekarang kita coba menggunakan tag marquee :
Perintah dasar :

Ketikan perintah dibawah ini :
<marquee>
Belajar menggunakan TAG Marquee.
</marquee>
Belajar menggunakan TAG Marquee.
Jika ingin memasukkan gambar coba ketikan seperti ini :

<marquee><img alt="PCGURU Blog" 
src="http://pcguru.okihelfiska.net/icon/ads/pcguru_button.png" />
</marquee>
PCGURU Blog
Contoh berikut kita akan menambahkan atribut yang ada pada marquee.
Menambahkan atribut behavior : (secara default menggunakan scroll)
<marquee>Menggunakan Behavior SCROLL</marquee>
Menggunakan Behavior SCROLL
<marquee behavior="slide">
Menggunakan Behavior SLIDE</marquee>
Menggunakan Behavior SLIDE
<marquee behavior="alternate">
Menggunakan Behavior ALTERNATE</marquee>
Menggunakan Behavior ALTERNATE
Menambahkan atribut direction : (secara default bergerak dari kanan ke kiri)
<marquee>Menggunakan Direction LEFT</marquee>
Menggunakan Direction LEFT
?
<marquee direction="right">
Menggunakan Direction RIGHT</marquee>
Menggunakan Direction RIGHT
Jika ingin menggunakan direction up dan down kita harus menambahkan atribut height terlebih dahulu.
<marquee direction="up" height="100">
Menggunakan Direction UP</marquee>
Menggunakan Direction UP
?
<marquee direction="down" height="100">
Menggunakan Direction DOWN</marquee>
Menggunakan Direction DOWN
Sampai disini pasti sudah pahamkan ? Sekarang kita lanjutkan lagi dengan menambahkan atribut yang lain. Kita akan menambahkan atribut width, height dan scrollamount.
<marquee scrollamount="2" width="50%">
Menggunakan Scrollamount 2</marquee>
Menggunakan Scrollamount 2
?View Code HTML
<marquee scrollamount="4" width="50%">
Menggunakan Scrollamount 4</marquee>
Menggunakan Scrollamount 4
<marquee scrollamount="6" width="50%">
Menggunakan Scrollamount 6</marquee>
Menggunakan Scrollamount 6
Berikutnya kita akan menambahkan atribut width, height dan scrolldelay.
?
<marquee scrolldelay="50" width="50%">
Menggunakan Scrolldelay 50</marquee>
Menggunakan Scrolldelay 50
<marquee scrolldelay="50" width="50%">
Menggunakan Scrolldelay 50</marquee>
Menggunakan Scrolldelay 175
?
<marquee scrolldelay="50" width="50%">
Menggunakan Scrolldelay 50</marquee>
Menggunakan Scrolldelay 350
Tag Marquee bisa dikombinasikan dengan kode lain dalam html, seperti merubah warnabackground, warna tulisan, memasukkan link, dll.
Contoh :
?
<font face="impact" color="#ffffff">
<marquee scrollamount="3" behavior="alternate" 
width="70%" bgcolor="#0000ff">MARQUEE BERWARNA
</marquee></font>
MARQUEE BERWARNA

mouseUntuk membuat marquee memiliki fungsi yang bagus, kita dapat menambahkan variasi lain dari marquee, yaitu membuat teks berjalan pada marquee berhenti ketika mouse digeserkan diatas area marquee, dan akan berjalan lagi ketika mouse digeser dari area marquee.
Contoh : arahkan mouse anda ke area marquee di bawah ini :
<marquee onmouseover="this.stop()" 
onmouseout="this.start()" scrollamount="3" 
direction="up" width="50%" height="200" 
align="center">ARAHKAN MOUSE ANDA KESINI<br />
<img src="http://pcguru.okihelfiska.net/wp-content/
uploads/2009/03/mouse.jpg" width="48" border="0" /></marquee>
ARAHKAN MOUSE ANDA KESINI

Bagaimana jika ingin dimasukkan Link ? Bisa gak yaa ? Berikut ini contoh marquee yang terdapat link :
?
<marquee onmouseover="this.stop()" onmouseout="this.start()"
 scrollamount="2" direction="up" width="50%" height="100" bgcolor="#CCCCCC">
<a href="http://okihelfiska.blogspot.com" target="_blank">Download Software</a><br/>
<a href="http://putra-piliang.blogspot.com" target="_blank">Putra Piliang</a><br/>
<a href="http://okihelfiska.wordpress.com" target="_blank">OQ Blog</a><br/>
</marquee>
Download Software

Putra Piliang

OQ Blog

Ini sedikit penjelasan tentang marquee. Silahkan anda coba sendiri dengan menggabungkan semua atribut yang ada untuk menciptakan marquee yang cantik buat blog. :)

http://pcguru.okihelfiska.net/2009/03/mengenal-lebih-dalam-tag-marquee/

Tidak ada komentar:

Posting Komentar