|
Pernahkah Anda melihat suatu baris dalam tabel yang bisa berubah warnanya ketika mouse Anda digeser diatasnya? Atau apakah Anda pernah menggunakan software seperti phpMyAdmin atau membaca web e-mail di Yahoo!? Disitu terlihat penggunaan tabel mouse over. Teknik ini menggunakan teknik CSS dan HTML biasa jadi tidak memerlukan javascript yang rumit.
Kita langsung saja ke codingnya.
<html>
<head>
<title>Tabel mouse over</title>
<style type="text/css">
<!--
td.mouseover {
border: 2px solid red;
color: white;
background: black;
font-family:verdana;
padding: 5px;
}
td.mouseout {
border: 2px solid red;
color: white;
background: gray;
font-family:verdana;
padding: 5px;
}
-->
</style>
</head>
<body>
<table summary="mouseover">
<tr>
<td class="mouseout" onmouseover="this.className='mouseover'" onmouseout="this.className='mouseout'">Dengan mouse over
</td>
<td>tanpa mouse over
</td>
</tr>
</table>
</body>
</html>
Untuk penjelasan cssnya, penulis rasa cukup gampang. Kita mulai dari "border" ini berarti berikan nilai pada bingkai/garis tepi (border) dengan ketebalan 2 pixel dan warna merah. "Color" disini adalah untuk warna untuk huruf yang digunakan. Huruf yang digunakan adalah Verdana yang didefinisikan pada bagian "font-family". "Padding" adalah jarak antara tulisan dengan cell (border dalam).
Sisanya adalah permainan sedikit DHTML, pada tag td (table data) gunakan class "mouseout" yang berarti mengatur bagaimana tampilan tabel ketika mouse tidak berada di wilayah tabel (normal). Kemudian jika ada mouse yang digerakkan di atas posisi tabel gunakan onmouseover="this.className='mouseover'" dan untuk menormalkannya kembali onmouseout="this.className='mouseout'".
Jika ada tabel atau baris/data yang tidak diinginkan menggunakan mouseover, tinggalkan saja kosong atribut class pelengkap dari tag td seperti contoh di
atas.
 |
Silakan download source code lengkap dari
project di atas |
Demikianlah tulisan sederhana mengenai pembuatan tabel dengan efek
mouse over. Semoga bermanfaat bagi Anda semua. Jika ada komentar atau saran bisa dikirimkan ke
webmaster@casolusi.com. Untuk membaca tulisan menarik lainnya silakan ke
www.sony-ak.com.
Terimakasih.
| Send
your comments or suggestions |
|
|
|
