About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

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


เรื่อง : เปลี่ยน Cursor หรือตัวชี้ของเมาท์บนหน้าเว็บเพจ

มีแฟนเว็บไถ่ถามกันเข้ามาว่า...จะเปลี่ยนรูปร่างของเมาท์ให้เป็นรูปตามที่เราต้องการได้อย่างไร ?
ครั้งนั้นก็เกรงว่าตอบไปที่หน้า Webboard แล้วจะทำไม่ได้กัน เลยขอผลัดเป็นว่าจะมาเขียนบทความให้อ่านครับ จึงเป็นที่มาของบทความนี้ ทั้งนี้ให้คุณลองสังเกตตัวชี้เมาท์คุณที่หน้าเว็บเพจในขณะนี้ครับว่าเป็นอย่างไร ? เพราะนั่นคือตัวอย่างครับ

วิธีการเปลี่ยน Cursor หรือตัวชี้ของเมาท์

ก่อนที่จะไปเปลี่ยน 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
ps. หากใครไม่มีไฟล์ Cursor ให้ทำการค้นหาได้จาก Google โดยค้นคำว่า Cursor Download หรือ Click ที่นี้
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การใช้งาน Composer สำหรับ PHP Programmer

เรื่อง: วิธีการใช้ Composer เบื้องต้น ตอนที่ 1 Composer เป็นโปรแกรมที่ใช้ในการจัดการ Library หรือ Packag...  

ทดสอบการทำงานของเว็บไซต์บนอุปกรณ์มือถือ (Mobile Devices) กับ Google

เรื่อง : มาทดสอบเว็บไซต์กับการแสดงผลบนอุปกรณ์มือถือ (Mobile Devices) ด้วยบริการจาก Google ปัจจุบันการออกแบบ และพัฒนาเว็บไซ...  

โปรแกรมเว็บบอร์ดเพื่อการศึกษา (Webboard)

เรื่อง : แนะนำโปรแกรมเว็บบอร์ดเพื่อการศึกษา (Webboard) ...  

ชื่อไฟล์กับเว็บไซต์ (File Name for Web)

เรื่อง : การตั้งชื่อไฟล์ที่ใช้กับเว็บไซต์ ชื่อไฟล์ (File Name)...หลาย ๆ คนคงนึกขำ หรือนึกไม่อยากอ่านกับ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*