Kamis, 03 November 2011

Cara Stop Marquee Saat Mouse Over


Teks berjalan (marquee) akan menambah cantik tampilan halaman web, akan lebih bagus jika marquee diberi link dan berhenti saat mouse over.
Dengan penggunaan tulisan berjalan ini selain bisa membuat tampilan web lebih bagus, juga akan membuat halaman web menjadi irit tempat sehingga ruangan halaman yang lain bisa digunakanuntuk keperluan yang lain. Penulisan marquee ini selain bisa digunakan untuk tulisan mendukung juga jika digunakan pada gambar.
Secara default marquee hanyalah teks yang berjalan saja, jika kita memberi link,kita akan kesulitan untuk melakukan klik terhadap alamat link yang kita buat dan hal ini sedikit membuat kurang nyaman. Untuk mengatasinya kita bisa membuat marquee dengan kondisi jika mouse pointer berada di atas tulisan berjalan maka tulisan tersebut akan berhenti dan jika mouse pointer tidak berada pada area teks berjalan maka marquee akan aktif kembali. Perhatikan potongan kode berikut ini untuk membuat marquee yang bisa berhenti saat mouse pointer berada diatasnya.

<marquee onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);" width="155" height="130" direction="Up" scrollamount="1" scrolldelay="100" style="border:#FF0000 1px solid">
Script Anda
</marquee>

Dari srcript diatas, beberapa hal yang bisa diedit untuk merubah tampilan marquee tersebut antara lain:
  • "Width" dan "height", digunakan untuk menentukan luas dari area marquee
  • "Border",digunakan untuk memberi garis sebagai pembatas area marquee
  • "Onmouse", digunakan untuk melakukan seting ketika kursor berada di area marquee
  • "Direction", digunakan untuk merubah arah pergeseran tulisan
  • "Scrolldelay", digunakan untuk mengatur kecepatan, makin besar angka makin lambat
  • "Scrollamount", digunakan untuk mengatur kecepatan, makin besar angka makin cepat
Perhatian: kode ini terdeteksi invalid jika kita menggunakan format xhtml.


Related Post



2 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...