Login To Facebook
Δ Selamat Datang Di Otocomputer Δ

Belajar Tag Marquee / Tulisan Berjalan

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 :




Belajar menggunakan TAG Marquee.



Jika ingin memasukkan gambar coba ketikan seperti ini :








Contoh berikut kita akan menambahkan atribut yang ada pada marquee.
Menambahkan atribut behavior : (secara default menggunakan scroll)


Menggunakan Behavior SCROLL


Menggunakan Behavior SLIDE


Menggunakan Behavior ALTERNATE


Menambahkan atribut direction : (secara default bergerak dari kanan ke kiri)


Menggunakan Direction LEFT





Menggunakan Direction RIGHT Jika ingin menggunakan direction up dan down kita harus menambahkan atribut height terlebih dahulu.

Menggunakan Direction UP

Menggunakan Direction DOWN

Membuat Marquee Bergaya Ketikan

Langkah membuatnya anda tinggal copy kode di bawah ini

<script language="JavaScript1.2">
<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Secify scroller contents
var line=new Array()
line[1]="Selamat datang di otomotif and computer"
line[2]="kumpulan tutorial dan tips blogger..."
line[3]="enjoy its"

//Specify font size for scoller
var ts_fontsize="16px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="\"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>


Silahkan simpan dimana marqueenya ingin muncul dengan menambah elemen Java Script. Jangan lupa mengganti teks yang becetak tebal dengan yang anda inginkan. Selamat mencoba semoga bermanfaat.
 

 






0 comments:

Poskan Komentar

Silahkan Komentar anda.Jangan spam ya...

"U Comment I Follow"

 
Template by: widodo dc © 2010