Cara Membuat Teks Area dengan Flip Background Image

Pada postingan kali ini,  Sahabat Blog akan membahas tentang cara membuat text area dengan 2 background gambar yang akan berubah dengan mouse over, mungkin para Sahabat blogger ataupun sobat sudah tak aneh lagi dengan yang namanya Teks area yang sering  sobat 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 kurang lebih seperti dibawah ini, coba sobat gerakan mouse  sobat  ke kotak area dibawah ini, Tulisan dan gambar backgroundnya akan berubah dengan digerakkannya mouse sobat.


Ayo Sobat di tunggu komentarnya, dan jangan lupa follow blog ini ya...hehe

Bagi sobat yang berminat untuk membuat teks area seperti pada contoh di atas pada begian postingan sobat, caranya adalah sebagai berikut ini.

1. Sobat copy semua kode dibawah ini, lalu paste kode tersebut tepat dibawah kode 

]]></b:skin> pada bagian halaman Html template sobat.

<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>

2. Setelah itu klik simpan/save.


Keterangan :.

Silahkan sobat rubah tulisan yang dicetak  kuning diatas sesuai dengan yang  sobat  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  sobat  masukan link gambar yang  sobat  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.

3. Setelah  sobat  selesai mencopy, meng-edit dan mempaste semua kode diatas. sekarang adalah cara memasukan kode Teks area kedalam postingan. caranya yaitu sobat  copy kode dibawah ini terus  sobat  masukan kedalam postingan  sobat .

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

 Tulis teks yang  sobat  inginkan disini 

</textarea>

Keterangan :

Bila sobat ingin merubah ukuran Teks area tersebut. silahkan  sobat  ganti ukuran rows dan cols-nya seperti yang dicetak tebal dan berwarna kuning pada bagian kode di atas.  rows yaitu untuk ukuran tinggi dan cols untuk ukuran lebar kotak teks area tersebut.

4. Selesai.