:: How to Build ::
- สร้างเมนูที่เป็นตัวลิงก์ในตารางธรรมดาขึ้นมาก่อน
<![CDATA[
<table bgcolor=000000 border=1><tr>
<td bgcolor="eeeeaa" Width=100>
<a href="http://realdev.truehits.net"> Realdev.Net </a></td>
<td bgcolor="eeeeaa" Width=100>
<a href="http://www.witty.net"> Witty.Net </a></td>
<td bgcolor="eeeeaa" Width=100>
<a href="http://www.thaiasp.net"> ThaiASP.Net </a></td>
</tr></table>
]]>
- เขียนฟังก์ชั่น menuOver(),menuOut(),menuClick() ไว้ในส่วน <HEAD> เพื่อตอบสนองการเอา mouse ไปชี้ที่เมนู ฟังก์ชั่นทั้ง 3 นี้สามารถใช้ได้กับตารางทุกๆ ช่องที่จะทำเป็นเมนู เนื่องจากรับพารามิเตอร์ src ซึ่งเป็นอ็อบเจ็กต์
<![CDATA[
<script language="JavaScript">
function menuOver(src,Colour) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = Colour;
}
}
function menuOut(src,Colour) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = Colour;
}
}
function menuClick(src) {
if(event.srcElement.tagName=='TD') {
src.children.tags('A')[0].click();
}
}
</script>
]]>
- เพิ่ม Event onmouseover,onmouseout และ onclick ในเมนูที่สร้างไว้ในข้อ 1.
พารามิเตอร์ที่ต้องป้อนให้กับฟังก์ชั่น menuOver(),menuOut,และ menuClick()
คือ this ซึ่งหมายถึงอ็อบเจ็กต์ที่เป็นช่องตารางนั่นเอง ส่วนรหัสสีนั้นใช้กำหนดว่าเมื่อเอา mouse ไปทับ แล้วจะ
ให้เปลี่ยนเป็นสีอะไร
<![CDATA[
<table border=1 bgcolor=000000><tr>
<td bgcolor="eeeeaa"
onmouseover="menuOver(this,'FFFFAA')"
onmouseout="menuOut(this,'EEEEAA')"
onclick="menuClick(this)" width=100>
<a href="http://realdev.truehits.net"> Realdev.Net </a></td>
<td bgcolor="eeeeaa"
onmouseover="menuOver(this,'FFFFAA')"
onmouseout="menuOut(this,'EEEEAA')"
onclick="menuClick(this)" width=100>
<a href="http://www.witty.net"> Witty.Net </a></td>
<td bgcolor="eeeeaa"
onmouseover="menuOver(this,'FFFFAA')"
onmouseout="menuOut(this,'EEEEAA')"
onclick="menuClick(this)" width=100>
<a href="http://www.thaiasp.net"> ThaiASP.Net </a></td>
</tr></table>
]]>
|
