GORAGOD.com

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

เป็นการทำ 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>