Menbuat Text Area Plus Flip Background Image

Buat sobat, yang mau bikin text area dengan menggunakan background gambar yang kita mau, biasanya pada umumnya text area itu tidak menggunakan gambar atau background. Nah kali ini saya punya trik dan tipsnya, ini saya ambil dari salah satu sobat kita tips and trik.yang munkin bagi sebagian sobat sudah tidak asing lagi dengan yang namanya text area cuma bedanya kali ini ketika si mouse kita di arahkan ke text area tersebut maka warna tulisan flip image/gambar akan berubah,penasaran?
Oke deh langsung saja,,

Bagi anda yang berminat silahkan copy paste kode berikut kode dibawah ini.. dan copy paste tepat di bawah kode ]]></b:skin>



Kodenya, seperti ini.


<style>
textarea.imageOne{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#00ff00;
}
textarea.imageTwo{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#ff0000;
}
</style>

Setelah Itu klik simpan/save.

Keterangan.


Silahkan anda rubah tulisan yang dicetak tebal dan berwarna merah diatas sesuai dengan yang anda inginkan. misalnya  pada bagian  textarea.imageOne, tertulis background-color:000000; yaitu untuk warna background. background-image:url(Masukan Link gambar ana disini); yaitu untuk background gambar, silahkan anda masukan link gambar yang anda inginkan. dan color:ff0000; yaitu untuk warna Teks. semua kode yang ada pada bagian bawah textarea.imageOne, yaitu gambar ataupun warna Teks yang akan tampil pertama dan kode yang terdapat dibawah textarea.imageTwo,
yaitu yang akan tampil ketika mosue digerkan atau Mouse over.


Nah kalou sudah mengcopy dan mengedit kode di atas, silahkan masukan kode text areanya kedalam postingan,

<textarea
rows="12" cols="60"
class="imageOne"
onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">

Tulis teks yang anda inginkan disini

</textarea>

Atau,,, kalou gak mau ribet silahkan copy paste text area tersebut kedalam template entri,biar nanti kalou mau menggunakannya tidak usah membuatnya lagi.

Yaitu,,, masuk ke bagian pengaturan lalu pilih format, dan copy paste text area tersebut kedalam template entri tersebut dan kalou sudah klik simpan/save.

Dan Hasilnya seperti ini kurang lebih.

Teks area dengan Flip Background Image, Nah sekian postingan kali ini, Saya mengucapkan terimakasih Kepada tips and trick untuk ilmunya, cara membuat text area dengan 2 background gambar yang berubah dengan mouse over, mungkin para blogger ataupun anda sudah tak aneh lagi dengan yang namanya Teks area yang sering anda lihat pada setiap blog ataupun website, dimana terdapat beberapa tulisan yang terletak pada kotak teks area tersebut. tapi bagaimana dengan kotak teks area yang mempunyai background gambar serta warna tulisan yang bisa berubah dengan mouse over. mungkin sebagian dari anda masih banyak yang belum tahu tentang trik ini. contohnya ini, coba anda gerakan mouse anda ke kotak area ini, Tulisan dan gambar backgroundnya akan berubah dengan digerakkannya mouse anda.


Nah sekian postingan kali ini, membuat text area plus flip Background Image.
Semoga Bermanfaat.