เปลี่ยน mouse cursor ใน เวปเพจได้ง่ายๆ ด้วย css

Pipo — Sun, 02 Mar 2008 17:03:57 +0000

ในบางครั้ง mouse cursor เดิมๆ ที่ติดมากับ browser อาจจะน่าเบื่อเกินไป หรือบางเวปต้องการความสวยงาม อยากมี mouse cursor เป็นรูปที่ตัวเองชอบ ด้วยขั้นตอนดังต่อไปนี้ ทำให้เราสามารถที่จะทำการเปลี่ยน mouse cursor เป็นแบบที่ต้องการได้ี้

มาดูตัวอย่างจากของจริงกันเลย คลิกที่นี่
อธิบายการทำงานได้ดังนี้

 
body{
 cursor: url(miyuki.cur)
}

เป็นการสั่งให้หน้านี้มี mouse cursor เป็นไฟล์ ชื่อว่า miyuki.cur

 
 style="cursor: help; width: 200px; height: 200px; background-color: rgb(204, 204, 204);">

ส่วน div ด้านล่างแสดงให้ดูว่าเราสามารถเปลี่ยน mouse cursor ได้ใน div ใดๆ ก็ตามครับ โดยในตัวอย่างจะเป็น mouse cursor ที่มีอยู่แล้วเลยไม่ต้องระบุไฟล์ .cur

เป็นไงขั้นตอนง่ายๆ เลยใช่ไหมครับ .cur จริงๆ แล้วก็ใช้ โปรแกรมทำ icon (.ico) ทำได้เลย ในตัวอย่างผมใช้ไฟล์ .ico มา rename เป็น .cur ครับ สามารถนำมาใช้งานได้ทันที แต่ว่าน่าเสียดาย css เรื่อง mouse นี้ใช้ได้เฉพาะ IE เท่านั้นครับ

S i X h E a D { ? } » cursor

เปลี่ยน mouse cursor ใน เวปเพจได้ง่ายๆ ด้วย css