เรื่อง :: เมาท์มาตารางเปลี่ยนสี

มีผู้ชมที่ติดตามเว็บ dwthai.com ขอกันเข้ามามากครับเกี่ยวกับการทำเทคนิคนี้ ซึ่งคุณคงจะเคยเห็นเทคนิคนี้กับเว็บบอร์ดของเว็บไซต์ไปแล้วนะครับ ถ้าใครเป็นผู้ชมรายใหม่ยังไม่รู้ว่าเทคนิคนี้เป็นอย่างไรก็ลองเอาเมาท์ (Mouse) ชี้ไปบนตารางด้านล่านนี้ครับ

webboard

วิธีการทำ

ขั้นแรก...ให้ท่านทำการสร้างตารางขึ้นมาใหม่ จากนั้นให้ทำการ Set Css Styles ขึ้นมาก่อนโดยการเข้าไปที่หน้าต่างของ Css Styles นะครับ (Menu Bar -> Window -> Css Styles) เมื่อเปิดหน้าต่าง CSS ขึ้นมาแล้วให้ทำการสร้าง CSSขึ้นมาใหม่ (New CSS Style) วิธีการสร้าง CSS ผมขีดเขียนถึงไปหลายคราแล้ว เลยขอรวบรัดตัดตอนเลยนะครับ ใครยังไม่รู้เรื่องได้โปรด...กลับไปอ่านในบทก่อน ๆ นะครับ ตั้งชื่อ Class ของ Css ว่าอะไรก็ได้นะครับ ในที่นี้ผมใช้ชื่อว่า .over ครับ หลังจานนั้น Click ที่ OK เมื่อ Click แล้วจะปรากฏหน้าต่างใหม่ขึ้นมาดังรูป Pic.1 นะครับ

Pic.1

ที่หน้าต่างนี้ให้เรา Click เลือกที่เมนูด้านซ้ายมือที่ Background นะครับ จากนั้นให้มาที่เมนูต่าง ๆ ทางด้านขวามือ ให้เรา Click เลือกสีของ BG ที่เราต้องการตรงช่อง Background Color นะครับ เมื่อเลือกได้แล้วทำการ Click ที่ปุ่ม OK ด้านล่างได้เลยครับ

เมื่อเราทำการเลือกสี BG ที่จะมาเปลี่ยนสีของตารางได้แล้วต่อมาเราก็มาเริ่มทำการกำหนด Event ของตารางกันนะครับ

ขั้นที่สอง....ไปที่ตารางที่ท่านได้สร้างขึ้นไว้แล้ว จากนั้นนำเอา Cursor ไปวางไว้ใน cell ของตารางนั้น (จะเห็นเป็นตัวกระพริบ ๆ ใน cell ตาราง) จากนั้นให้ท่าน Click ขวาที่ตำแหน่งนั้นแล้วเลือกไปที่เมนู Edit Tag <td> หรือ ให้ทำการกด Ctrl + F5 ก็ได้ครับ (ดังรูป Pic.2)

Pic.2

เมื่อทำแล้วจะปรากฏหน้าต่างใหม่ออกมา ดัง Pic.3 นะครับ ที่หน้าต่างนี้ในตอนแรกให้เลือกไปที่ Event (เมนูทางซ้ายนะ) จากนั้นเลือกไปที่ onMouseOver นะครับ (Event -> OnMouseOver)

Pic.3

จานั้นให้มาที่หน้าต่างทางขวามือ ตรงช่องว่าง ๆ ขาว ๆ ใหญ่ ๆ อวบ ๆ ...เฮ้ยไม่ใช่ ช่องว่าง ๆ อย่างเดียวนะครับ ให้ทำการพิมพ์ ข้อความดังนี้นะครับ
className="over"
ตรงคำว่า over นี้คือชื่อของ Css Style ที่เรากำหนดขึ้นมาจากขั้นตอนแรกนะครับ ใครตั้งเป็นชื่ออะไรก็พิมพ์ตามนั้นครับ เมื่อพิมพ์เสร็จแล้ว ยังไม่ต้อง OK กับใครทั้งนั้นครับ เรายังต้องทำอีก 1 ขั้นตอนครับ ดังนี้ >>>
ให้ไปที่เมนูทางซ้ายมืออีกครั้ง คราวนี้เลือกไปที่ onMouseOut นะครับ (Event -> onMouseOut) จากนั้นให้ทำเหมือนเดิมคือทำการพิมพ์ข้อความลงไปตรงช่องขาว ๆ ด้านขวามือ แต่คราวนี้พิมพ์เป็น
className=""
ในเครื่องหมายฟันหนู ไม่ต้องพิมพ์อะไรลงไปนะครับ (ดูรูป Pic.4) จากนั้นก็ตอบ OK กับเขาไปได้เลยครับ (ถ้าเขาไม่ยอม OK ด้วยก็ฟ้องเว็บมาสเตอร์ได้เลยครับ)

Pic.4

เป็นอันเสร็จการทำให้ตารางเปลี่ยนสีที่ท่านต้องการครับ ทำการ Preview ดูกับ Browser นะครับ

................................................................................................................................................................................

Trick....คุณต้องทำการพิมพ์ตัวอักษรเล็กใหญ่ให้เหมือนกับตัวอย่าง เช่น className คุณจะพิมพ์เป็น ClassName ไม่ได้