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 Browser ในโหมดไม่ระบุตัวตน (Incognito Mode) กับการพัฒนาเว็บไซต์

เรื่อง : เปิดใช้ Web Browser ในโหมดไม่ระบุตัวตน (Incognito Mode) กับการทำเว็บ Web Browser...  

เรื่องสถานะของ Link

เรื่อง : สถานะของ Link ที่นักพัฒนาเว็บควรรู้และเข้าใจ Link (ลิงค์) หรือจุดเชื่อมโยง เป็นเอกลักษณ์อย่างหนึ่...  

คิดจะทำ Website ควรรู้สิ่งใดบ้าง ?

เรื่อง :: การทำเว็บไซค์ควรรู้สิ่งใดบ้าง...  

การออกแบบเว็บเพจให้แสดงกลางจอ Web Browser

เรื่อง : ออกแบบเว็บอย่างไรให้อยู่กลางหน้าจอ ? (Centering a 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

*
*
*