Freecode
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

ทำปุ่มลิงก์จากตาราง

          สคริปต์นี้เหมาะที่จะเอาไปทำเมนู ซึ่งจะทำให้เวบโหลดเร็ว และได้เมนูสวยๆโดยไม่ต้องใช้รูปภาพ

Realdev.Net Witty.Net ThaiASP.Net

:: How to Build ::
  1. สร้างเมนูที่เป็นตัวลิงก์ในตารางธรรมดาขึ้นมาก่อน <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>
  2. เขียนฟังก์ชั่น menuOver(),menuOut(),menuClick() ไว้ในส่วน <HEAD> เพื่อตอบสนองการเอา mouse ไปชี้ที่เมนู ฟังก์ชั่นทั้ง 3 นี้สามารถใช้ได้กับตารางทุกๆ ช่องที่จะทำเป็นเมนู เนื่องจากรับพารามิเตอร์ src ซึ่งเป็นอ็อบเจ็กต์ <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>
  3. เพิ่ม Event onmouseover,onmouseout และ onclick ในเมนูที่สร้างไว้ในข้อ 1.
    พารามิเตอร์ที่ต้องป้อนให้กับฟังก์ชั่น menuOver(),menuOut,และ menuClick() คือ this ซึ่งหมายถึงอ็อบเจ็กต์ที่เป็นช่องตารางนั่นเอง ส่วนรหัสสีนั้นใช้กำหนดว่าเมื่อเอา mouse ไปทับ แล้วจะ ให้เปลี่ยนเป็นสีอะไร <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>

Back to top





© copyright 2001 Sorrawut Korsuwansiri