Rabu, Februari 18, 2009

Menghasilkan marquee..

Assalamualaikum dan selamat bertemu kembali..

Hari ini aku ingin menulis mengenai satu lagi pengaplikasian bahasa HTML (HyperText Markup Language), iaitu bahasa asas bagi sesebuah laman sesawang (website).


Catatan kali ini ialah mengenai marquee. Aku tidak pasti mengenai istilah yang sesuai untuk diterjemahkan ke dalam bahasa Melayu, lantas aku menggunakan perkataan asal untuk istilah tersebut.

Aku mengakui bahawa tajuk ini adalah begitu mudah dan asas. Namun, setelah menerima pertanyaan daripada beberapa orang kenalan, aku membuat keputusan untuk menulis di sini agar menjadi rujukan bagi sesiapa yang memerlukan.

Apakah itu marquee?

Secara mudahnya, mengikut terjemahanku, marquee ialah satu fungsi yang menjadikan apa sahaja elemen HTML yang berada di antara <marquee> dan </marquee> bergerak, atau lebih tepat, bergelintar. Kebiasaannya, terdapat dua elemen yang berkaitan dengan marquee iaitu teks dan imej.

Asas bagi marquee

Secara asas(default)nya, untuk elemen berjenis teks, hanya kod di bawah ini diperlukan.

<marquee>Teks ini bergelintar dari kanan ke kiri..</marquee>


Hasilnya adalah seperti di bawah ini :

Teks ini bergelintar dari kanan ke kiri..

Pembaca boleh menggantikan teks yang bergelintar tersebut dengan apa jua teks yang diingini!

Untuk elemen berjenis imej pula, secara asas(default)nya, hanya kod di bawah ini diperlukan.

<marquee><img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>


Hasilnya adalah seperti di bawah ini :



Pembaca hanya perlu menggantikan http://LokasiDirektoriAnda/ImejAnda.jpg kepada lokasi dalam internet bagi imej yang ingin anda gunakan.

Ciri-ciri dalam marquee

Untuk mengawal fungsi marquee tersebut, terdapat beberapa ciri yang menarik untuk diketahui. Ciri-ciri tersebut ialah direction, behavior, scrolldelay, scrollamount, loop dan bgcolor.

    1) direction

Ciri ini berfungsi untuk mengawal arah pergerakan. Terdapat empat nilai yang boleh digunakan untuk ciri ini iaitu left, right, up, dan down. Empat jadual di bawah boleh membantu pembaca untuk lebih memahami penggunaannya.

Nilaileft (nilai asas)
FungsiMenggerakkan elemen dari kanan ke kiri
Kod
<marquee direction=left>Teks ini dan imej di sebelahnya bergelintar dari kanan ke kiri.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dari kanan ke kiri..


Nilairight
FungsiMenggerakkan elemen dari kiri ke kanan
Kod
<marquee direction=right>Teks ini dan imej di sebelahnya bergelintar dari kiri ke kanan.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dari kiri ke kanan..


Nilaiup
FungsiMenggerakkan elemen dari bawah ke atas
Kod
<marquee direction=up>Teks ini dan imej di sebelahnya bergelintar dari bawah ke atas.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dari bawah ke atas..


Nilaidown
FungsiMenggerakkan elemen dari atas ke bawah
Kod
<marquee direction=down>Teks ini dan imej di sebelahnya bergelintar dari atas ke bawah.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dari atas ke bawah..


    2) behavior

Ciri ini pula akan menentukan cara gelintaran sesuatu elemen. Terdapat tiga nilai yang boleh digunakan untuk ciri behavior iaitu scroll, slide, dan alternate. Mari kita lihat tiga jadual yang berkaitan dengan ciri ini.

Nilaiscroll (nilai asas)
FungsiMenggelintarkan elemen sehingga ke satu pinggir kemudian memunculkannya semula di pinggir yang lain secara berulang-ulang
Kod
<marquee behavior=scroll>Teks ini dan imej di sebelahnya bergelintar secara scroll.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar secara scroll..


Nilaislide
FungsiMenggelintarkan elemen sehingga ke satu pinggir kemudian memberhentikan pergerakannya
Kod
<marquee behavior=slide>Teks ini dan imej di sebelahnya bergelintar secara slide.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar secara slide..


Nilaialternate
FungsiMenggelintarkan elemen sehingga ke satu pinggir kemudian memantulkannya secara berulang-ulang
Kod
<marquee behavior=alternate>Teks ini dan imej di sebelahnya bergelintar secara alternate.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar secara alternate..


    2) scrolldelay

Ciri ini akan menentukan selang yang berada antara pergerakan marquee. Di bawah ini kami sertakan tiga jadual sebagai contoh untuk memudahkan pembaca sekalian.

Nilai85 (nilai asas)
FungsiMenggelintarkan elemen pada kadar selang yang asas
Kod
<marquee scrolldelay=85>Teks ini dan imej di sebelahnya bergelintar pada kadar selang yang asas.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kadar selang yang asas..


Nilai500
FungsiMenggelintarkan elemen pada kadar selang yang lebih panjang
Kod
<marquee scrolldelay=500>Teks ini dan imej di sebelahnya bergelintar pada kadar selang yang lebih panjang.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kadar selang yang lebih panjang..


Nilai40
FungsiMenggelintarkan elemen pada kadar selang yang lebih pendek
Kod
<marquee scrolldelay=40>Teks ini dan imej di sebelahnya bergelintar pada kadar selang yang lebih pendek.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kadar selang yang lebih pendek..


    2) scrollamount

Ciri ini pula akan menentukan kelajuan sesuatu marquee. Perhatikan tiga jadual di bawah ini.

Nilai6 (nilai asas)
FungsiMenggelintarkan elemen pada kelajuan asas
Kod
<marquee scrollamount=6>Teks ini dan imej di sebelahnya bergelintar pada kelajuan asas.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kelajuan asas..


Nilai50
FungsiMenggelintarkan elemen pada kelajuan yang lebih tinggi
Kod
<marquee scrollamount=50>Teks ini dan imej di sebelahnya bergelintar pada kelajuan yang lebih tinggi.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kelajuan yang lebih tinggi..


Nilai2
FungsiMenggelintarkan elemen pada kelajuan yang lebih rendah
Kod
<marquee scrollamount=2>Teks ini dan imej di sebelahnya bergelintar pada kelajuan yang lebih rendah.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar pada kelajuan yang lebih rendah..


    2) loop

Ciri loop berfungsi untuk mengawal bilangan ulangan pergerakan marquee. Dua jadual di bawah dapat membantu kefahaman pembaca sekalian.

Nilai0 (nilai asas)
FungsiMenggelintarkan elemen secara berulang-ulang tanpa henti
Kod
<marquee loop=0>Teks ini dan imej di sebelahnya bergelintar secara berulang-ulang tanpa henti.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar secara berulang-ulang tanpa henti..


Nilai2
FungsiMenggelintarkan elemen secara berulang-ulang sebanyak dua kali sahaja
Kod
<marquee loop=2>Teks ini dan imej di sebelahnya bergelintar secara berulang-ulang sebanyak dua kali sahaja.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar secara berulang-ulang sebanyak dua kali sahaja..


    2) bgcolor

Ciri ini pula digunakan untuk mewarnakan latar belakang teks yang bergelintar itu dengan warna yang dikehendaki. Perhatikan tiga jadual di bawah ini.

Nilaiyellow
FungsiMenjadikan latar belakang berwarna kuning
Kod
<marquee bgcolor=yellow>Teks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna kuning.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna kuning..


Nilaiblue
FungsiMenjadikan latar belakang berwarna biru
Kod
<marquee bgcolor=blue>Teks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna biru.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna biru..


Nilaigreen
FungsiMenjadikan latar belakang berwarna hijau
Kod
<marquee bgcolor=green>Teks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna hijau.. <img src="http://LokasiDirektoriAnda/ImejAnda.jpg" /></marquee>

HasilTeks ini dan imej di sebelahnya bergelintar dengan berlatarbelakangkan warna hijau..


Untuk pengetahuan pembaca, secara asas(default)nya, marquee sudah ditetapkan untuk nilai-nilai tertentu. Untuk nilai-nilai tersebut, kami telah menandakannya di dalam jadual-jadual sebagai nilai asas. Untuk nilai-nilai tersebut, ciri-ciri yang berkaitan tetap akan berfungsi walaupun ciri dan nilai tersebut tidak digunakan.

Selamat mencuba dan ikuti catatan kod javascript kami yang seterusnya.

P/S : Marquee yang terdapat dalam catatan ini tidak berfungsi jika dilihat menggunakan pelayar Mozilla Firefox tetapi berfungsi jika dilihat melalui pelayar Internet Explorer. Penulis akan cuba mencari penyelesaian kepada masalah ini.


Cetak catatan ini..

0 ulasan:

Disediakan oleh Tengku Azlan || Hakcipta Terpelihara © 2008