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 :
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.
| Nilai | left (nilai asas)
|
| Fungsi | Menggerakkan 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> |
|
| Hasil |
|
| Nilai | right
|
| Fungsi | Menggerakkan 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> |
|
| Hasil |
|
| Nilai | up
|
| Fungsi | Menggerakkan 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> |
|
| Hasil |
|
| Nilai | down
|
| Fungsi | Menggerakkan 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> |
|
| Hasil |
|
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.
| Nilai | scroll (nilai asas)
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | slide
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | alternate
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
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.
| Nilai | 85 (nilai asas)
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | 500
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | 40
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
2) scrollamount
Ciri ini pula akan menentukan kelajuan sesuatu marquee. Perhatikan tiga jadual di bawah ini.
| Nilai | 6 (nilai asas)
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | 50
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | 2
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
2) loop
Ciri loop berfungsi untuk mengawal bilangan ulangan pergerakan marquee. Dua jadual di bawah dapat membantu kefahaman pembaca sekalian.
| Nilai | 0 (nilai asas)
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
| Nilai | 2
|
| Fungsi | Menggelintarkan 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> |
|
| Hasil |
|
2) bgcolor
Ciri ini pula digunakan untuk mewarnakan latar belakang teks yang bergelintar itu dengan warna yang dikehendaki. Perhatikan tiga jadual di bawah ini.
| Nilai | yellow
|
| Fungsi | Menjadikan 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> |
|
| Hasil |
|
| Nilai | blue
|
| Fungsi | Menjadikan 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> |
|
| Hasil |
|
| Nilai | green
|
| Fungsi | Menjadikan 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> |
|
| Hasil |
|
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.
[+] Baca seluruh catatan ini..
[-] Kembali kepada ringkasan..
kali
Azmi adalah salah seorang sahabat lamaku semasa di Maahad Muhammadi Lelaki yang juga berkahwin pada tahun lalu, iaitu melafazkan akad nikahnya sehari selepas aku diijabkabulkan. Tadi dia telah menyampaikan satu lagi berita gembiranya iaitu dia sekarang sudah bergelar ayah!
Ketika menunggu nombor giliran dipanggil, aku terlihat seorang wanita yang seolah-olah aku pernah kenali sedang mendukung anak yang masih kecil di luar bangunan klinik tersebut. Dia yang mula nampak kelibatku menegur sambil wajahnya juga seperti wajahku ketika itu iaitu cuba mengingat sesuatu.
