HOME P H P C S S Tips and Trik Kontes SEO

Merubah Warna Background Tabel Ketika Disentuh Mouse



Hai sobat ketemu lagi di "Tutorial" kami lainnya. Kali ini saya akan membahas cara merubah warna table ketika MouseOver.Tapi sorry yah kalo judulnya susah banget dipahami, soalnya susah mau gimana cara menguraikannya dalam judul. Akhirnya tertulis deh judulnya menjadi Merubah Warna Background Tabel Ketika Disentuh Mouse. Semoga temen-temen kagak bingung. Intinya disini saya mau membuat perubahan warna pada baris atau kolom dari sebuah tabel, yang mana perubahan warna itu akan timbul jika garis atau kolom tersebut di sentuh oleh mouse. Istilah kerennya "Changing table background on MouseOver".
Yuk kita bahas satu satu cara merubah warna tabel ketika disentuh mouse atau mouse over. Nah..dalam hal ini kita akan memakai Coding CSS untuk membuat perubahan warna tersebut. Mari kita mulai membahasnya ya...
  • Pertama kali coba copykan code dibawah ini diantara <HEAD></HEAD>
    • <style type="text/css">

      td.off {
      background: #CCCCCC;
      }
      td.on {
      background: #999999;
      }
      </style>


  • Nah kode diatas dipakai jika anda mau merubah warna tabel bagian kolom ketika disentuh oleh mouse. Jika anda mau membuat perubahan warna baris ketika disentuh mouse maka script yang anda masukkan adalah sebagai berikut :
    • <style type="text/css">

      tr.off {
      background: #CCCCCC;
      }
      tr.on {
      background: #999999;
      }
      </style>


  • Setelah anda copykan kode diatas diantara <HEAD></HEAD> , selanjutnya silahkan copykan kode berikut. Disini ada dua kode. Jika sobat mau membuat perubahan warna table dibagian kolom, maka pakailah kode yang paling atas. jika sobat mau membuat perubahan warna dibagian baris pada table, silahkan pakai kode dibawah.
    • <td class="off" onmouseover="this.className='on'"
      onmouseout="this.className='off'"></td>
    • <tr class="off" onmouseover="this.className='on'"
      onmouseout="this.className='off'">
nah..kurang lebihnya seperti itu sobat cara membuat perubahan warna table ketika mouseover. Kalo masih bingung atau gendeng...he...he.., sobat bisa lihat contoh lengkapnya seperti berikut.


Untuk perubahan warna table bagian kolom ketika mouseover

<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
</head>
<body>
<table >
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Perubahan warna kolom ketika disentuh mouse</td></tr>

</table>
</body>
</html>


Untuk perubahan warna table bagian baris ketika mouseover
<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
tr.off {
background: #CCCCCC;
}
tr.on {
background: #999999;
}
</style>
</head>
<body>
<table >
<tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<td>Perubahan warna baris ketika disentuh mouse</td>
</tr>
</table>
</body>
</html>


Oke...selesai sudah "tutorial mengubah warna table ketika mouseover". Semoga bisa bermanfaat buat sobat semua. Sampai ketemu di "tutorial" lainnya ....tetep semangat ya temen-temen........

Tags : merubah warna background tabel, mouseover


1 comment:

Silakan Coment disini

Related Posts with Thumbnails

Artikel Lainnya


ARSIP BLOG
MY MENU
POSTING TERBARU
TUKAR LINK

MEMBER
WEB LINKs
VISITOR