เปลี่ยน Cursor หรือตัวชี้เมาท์ง่าย ๆ สไตล์เรา [Article ID : 168]

ก่อนที่จะไปเปลี่ยน Cursor กัน สิ่งแรกเราต้องเตรียมไฟล์ของ Cursor ที่เราต้องการเสียก่อน โดยไฟล์ของ Cursor ที่ต้องการนำมาใช้นั้น ให้พิจารณาจาก Web Browser ดังนี้
- Chrome หรือ FireFox สามารถใช้รูปในฟอร์แมท PNG ได้ เช่น my-cursor.png เป็นต้น
- Internet Explorer (IE) ต้องใช้ไฟล์ฟอร์แมท CUR เช่น my-cursor.cur เป็นต้น เมื่อได้จัดเตรียมไฟล์ของ Cursor แล้วปฏิบัติตามขั้นตอน ดังนี้

1. ทำการใช้ CSS เพื่อเปลี่ยน Cursor หน้าเว็บเรา โดยมีโค้ด ดังนี้

<style type="text/css">
<!--
body{
	cursor: url(my-cursor.cur), default; /*For IE*/
	cursor: url(my-cursor.png) 0 0, default; /*For Chrome or FireFox*/
	}
-->
</style>
	

*สามารถ Copy Code ข้างต้นไปวางในส่วนของ Source Code ของเว็บเพจได้

2. ที่ Code ดังกล่าว ทำการแก้ไขในส่วนของ cursor:url(my-cursor.cur); ให้ถูกต้องตรงตามชื่อไฟล์ และตำแหน่งที่อยู่ของไฟล์ Cursor ที่เราทำการจัดเก็บไว้ใน Folder หรือระบุเป็น URL ลงไปก็ได้เช่นเดียวกัน เช่น ถ้าผมเก็บไฟล์ Cursor นี้ไว้ใน Folder ที่ชื่อ img ผมจะเปลี่ยน Code ตรงนี้เป็น cursor:url(img/my-cursor.cur); เป็นต้น แต่ถ้าหากไฟล์ Cursor นั้นอยู่ใน Folder เดียวกับไฟล์เว็บเพจก็สามารถใช้งาน Code ข้างต้นได้เลย โดยให้ทำการเปลี่ยนเพียงชื่อไฟล์ใน Code เท่านั้น

3. เมื่อได้วางโค้ดและแก้ไขโค้ดตามที่แนะนำข้างต้นแล้ว ให้ทำการพรีวิว ดูการแสดงผลกับ Web Browser