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



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

การตรวจสอบรูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page

เรื่อง : การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้...  

Insert รูปภาพกับ Dreamweaver แล้วรูปไม่แสดงที่ Browser

เรื่อง : ใช้ Dreamweaver แทรกรูปภาพแล้วรูปไม่แสดงที่ Web Browser คำถามที่ผมมักจะพบอยู่บ่อย ๆ กับการใช้งาน Dreamwe...  

เขียนโปรแกรม (PHP) อย่างไรให้ Run เร็ว

เรื่อง : เขียนโปรแกรม PHP อย่างไรให้ทำงานได้อย่างรวดเร็ว เคยเข้าไปอ่านบทความของฝรั่ง (Eng) เขามา เรื่องของการพิสูจน์แล้วน...  

รหัสค่าสีที่ใช้กันใน Web Page (Web Color)

เรื่อง : รหัสค่าสีที่ใช้กันใน Web Page ระบบค่าสีที่เราใช้กันกับเว็บหรือใช้ที่หน้าเว็บเพจ (Web Page) ต่าง ๆ นั้น สำหรับคนท...  


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

*
*
*