All post

Tampilkan postingan dengan label Textarea background. Tampilkan semua postingan
Tampilkan postingan dengan label Textarea background. Tampilkan semua postingan

Rabu, 15 April 2009

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

Untuk membuanya cukup mudah buanget, liat cara dibawah 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..

selanjutnya...