Gambar. Keterangan pada inpu box
Pernahkah liat input box pada seperti gambar diatas, dalam gambar diatas terdapat tulisan search yang ketika diklik/atau mouse kita arahkan ke text box tersebut maka tulisan search akan hilang, seperti gambar dibawah :
Gambar. Tulisan Search yang menghilang
dan ketika mouse/kursor sudah tidak berada dalam text box maka tulisa search akan kembali muncul. Untuk lebih jelasnya mari kita coba membuatnya, pertama - pertama mari kita buat skrip watermark.html
setelah kita simpan file tersebut, mari kita coba jalankan, tp perlu diingat anda harus menyertakan file jquery-1.4.js dan buat file main.css yang diletakan satu folder dengan watermark.html, didalam contoh ini penulis meletakan file main.css di dalam subfolder css. Untuk mendapatkan file jquery-1.4.js, Anda dapat langsung mendownload di situs resminya J-Query disini , Save As file tersebut ke dalam folder yang masih sama dengan folder dimana Anda meletakan file watermark.html. Setelah semua sudah, maka kita lihat hasilnya seperti gambar dibawah :
Gambar. Hasil dari watermark.html
dan ketika kursor kita arahkan kesalah satu textbox maka hasilnya terlihat seperti gambar dibawah..
Gambar. Tulisan watermark menghilang saat kursor diarahkan ke text box
Sekian dulu ya...nanti jumpa lagi...jika da yang salah di komen ya...^_^
0 komentar:
Posting Komentar