เปลี่ยนสีพื้นหลังของตาราง เมื่อเลื่อนเมาส์ไปบนตาราง

เป็นการทำ highlight cell ครับ ประยุกต์ใช้ event ของ DOM สามารถใช้กับ element ได้ทุกชนิดครับไม่ว่าจะเป็น div span หรือ อื่นๆ

ตัวอย่างนี้เป็นการเปลี่ยนสีพื้นของตาราง เมื่อเมาส์อยู่บนตาราง และเมื่อออกจากตารางไปแล้ว

<style>

.tditem {

  font-size: 12px;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  text-decoration: none;

  color: gray;

}

</style>



<center>

<table border=0 cellpadding=0 cellspacing=0><tr>

<td onmouseover="this.style.background='#004891'" onClick="window.location='#'" style="cursor:hand" onmouseout="this.style.background='#E9F0F8'" bgcolor="#E9F0F8" width="100" align="center" valign="center"><b><a href="#" class="tditem">เมนู 1 </a></b></td>

<td onmouseover="this.style.background='#004891'" onClick="window.location='#'" style="cursor:hand" onmouseout="this.style.background='#E9F0F8'" bgcolor="#E9F0F8" width="102" align="center" valign="center"><b><a href="#" class="tditem">เมนู 2 </a></b></td>

<td onmouseover="this.style.background='#004891';" onClick="window.location='#'" style="cursor:hand" onmouseout="this.style.background='#E9F0F8'" bgcolor="#E9F0F8" width="100" align="center" valign="center"><b><a href="#l" class="tditem">เมนู 3 </a></b></td>

</tr></table>

</center>