Membuat background textarea dengan efek mouse over
Pernakah anda terfikir untuk membuat text area dengan menggunakan latar belakan sebuah gambar.. Nah selain buat copy paste juga bisa sebagai hiasan pada blog..,teknik pembuatanya cukup mudah, Selain itu juga ditambah dengan efek mouse over.. Saat mouse bergerak diatas text area backgroun akan berubah warna, begitu pula pada teks.. Liat contoh di bawah ini
Langkah 1.:
-------- Tempat ini script gaya dalam <head> dari halaman:
<style> textarea.imageOne{ background-color:000000; background-image:url(blue_saturn.jpg); color:00ff00; } textarea.imageTwo{ background-color:000000; background-image:url(butterflies.jpg); color:ff0000; } </style> Rubah lah blue_saturn.jpg dan butterflies.jpg dengan url foto Anda sendiri
Langkah 2.:
Letakan text area dibawah ditempat yang anda inginkan
<textarea> seperti ini: <textarea rows="12" cols="74" class="imageOne" onMouseOver="this.className='imageTwo'" onMouseOut="this.className='imageOne'"> . . . Letakan text anda disini . . . </textarea> Dalam contoh diatur background-color: 000000;
Warna background-color biasanya harus sama dengan gambar latar belakang warna, Biar ga berlawanan warna dengan gambar it sendiri pada saat di klik latar belakang seperti tidak berubah hanya gambar saja yang hilang.
Warna teks : ff0000; dan warna: 00ff00; yaitu teks warna merah dan hijau, itu digunakan untuk merubah warna pada saat mouse over.
Mungkin pada browser latar akan berbeda,misalnya IE, NS6..
Dikutip Oleh : http://oce-modifblog.blogspot.com
Tidak ada komentar:
Posting Komentar