CSS : Cursor

posted on 21 Oct 2006 17:19 by lemonice in TuTorial

มาแล้วจ้า พ่อแม่พี่น้องทุกท่าน หลังจากที่ให้รอคอยกันนาน จนแม่ไม่ปลื้ม ไปตามๆ กัน เอาหล่ะ นักเรียนที่รักนั่งประจำที่เตรียมรับความหนุกหนานกันได้ กับ Episode 4 ของ CSS ในส่วนของ Cursor จ้า

สำหรับในส่วนของ Cursor มีคำสั่งเดียวคือ


	cursor : กำหนดค่า ;

.Name { cursor : กำหนดค่า ;}

แต่ที่จะต้องอธิบายกันหน่อยก็ในส่วนของการกำหนดค่านี่หล่ะ ซึ่งมันมีให้เรา เลือกใช้อยู่หลายอย่างด้วยกันน่ะ ดังตารางเด้อ

cursor :auto	cursor : crosshair
cursor :default	cursor :pointer
cursor :move	cursor :e-resize
cursor :ne-resize	cursor :nw-resize
cursor :n-resize	cursor :se-resize
cursor :sw-resize	cursor :s-resize
cursor :w-resize	cursor :text
cursor :wait	cursor :help

ส่วนถ้าไม่ชอบใช้ในรูปแบบของ Cursor คือจะใช้cursor ที่สร้างเองแทนอ่ะนะ ก็ใช้คำสั่ง

cursor : url(" ที่อยู่ของCursor ")

ในกรณีพิเศษ ที่เราอยากให้ลิงค์ ลิงค์เดียว มีรูปแบบ Cursor แตกต่างออกไป
เมื่อเราสร้างลิงค์แล้ว ให้เปิดโหมด Code จะเห็นคำสั่งในส่วนลิงค์ คือ

<a href="Url ที่จะลิงค์">ข้อความ</a>

ให้เราใส่คำสั่ง style="cursor : รูปแบบที่ต้องการ"
ลงในคำสั่ง ดังตัวอย่าง

<a href="#" style="cursor:help" >จะลิงค์แล้วน้า</a>

ท้ายสุดก็จะได้แบบนี้ลองเอาเมาส์วางดูดิ >> จะลิงค์แล้วน้า

สำหรับใน Exteen คำสั่งเปลี่ยนรูปแบบเมาส์สำเร็จรูปเลย ก็คือ

body{CURSOR: กำหนดค่าดิ } << เมาส์ปกติ
A{CURSOR: กำหนดค่า} << เมื่อเอาเมาส์วางบนลิงค์

เอาไปวางไว้ล่างสุดของส่วนโค้ดก็ได้น่ะ แยกไว้ต่างหากจะได้แก้ไขง่ายๆ
จบแค่นี้ล่ะจ้า...

ปล. จะเอาวิธีทำเมาส์ป่าวอ่ะ แบบในบลอคเรา.... บอกด้วย
ปล2. บทนี้ไม่ค่อยมีเนื้อหาอะไรเลยแฮะ เหอๆ...

Tags: css, cursor40 Comments

เจ๋งมากครับ ขอบคุณมากที่เอาโค้ดมาลง นึกว่าจะหายไป ไม่กลับมาซะแล้ว

#1 By เจ้าชายน้อย on 2006-10-21 17:24

เอาคร้าบ ดูโค้ด ก็ไม่ค่อยแน่ใจ
ของความกระจ่างหน่อยนะ

#2 By .-: [N]_oTT:-. on 2006-10-21 17:25

ขอบคุณมากมายเลยฮะ~
ไว้ว่างๆเอาไปลองมั่ง
>3<~

ปล.สนใจวิธีทำเมาส์ค้าบ~

#3 By :: แมวดาว :: on 2006-10-21 17:25

หายไปนานน่ะเพ่เลม่อน~!!!~

ขอบคุณสำหรับเนื้อหาดีๆ

ป๋มมีบล็อคเเร๊สคร๊าฟฟฟฟ- - -

#4 By on 2006-10-21 17:26

อ้าคร้า แบบว่า ทำเคอร์เซอร์ในartcursorsได้และอ่าค่ะ โค้ดก้อมีและอ่า แต่....ไม่มีที่อัพโหลดTT^TT ช่วยแนะที่อัพโหลดหน่อยน๊าค๊าขอบคุนค่า^^

#5 By "Ke Shi ki" on 2006-10-21 17:28

เจ๋งจริงๆเลยค่ะ

เดี๋ยวจะเอาไปทำดู
แต่อยากได้วิธีทำเม้าส์ด้วยได้ป่ะคะ แหะๆๆ

#6 By †:: K-zzy ::† on 2006-10-21 17:38

ขอบคุณครับ
สนใจวิธีทำเมาส์ด้วยครับ
ขอเซฟไว้นะครับ

#7 By ~the xnux~ on 2006-10-21 17:50

ขอบคุงมักค่า ><

เด่วว่าง ๆ จะลองดู

ถึงจะ งง หน่อยก้อเหอะ แหะ ๆ

#8 By ~[ on 2006-10-21 17:51

ว่าจะทำอยุ่เหมือนกันงับ แต่หาเมาทืที่เข้ากับรูปแบบบล้อกไม่ได้แฮะ งิงิงิ

#9 By [Freedomlism : อิศรานุทิน® ™]แต่งบล้อก+บทความ+เรื่องสั้น+เพลง+นิยาย on 2006-10-21 18:01

ขอบคุณฮะ
สนใจเหมือนกัน ทำเมาส์ๆ ด้วยคน

#10 By ємρ†y * on 2006-10-21 18:02

เพิ่งหัดทำมาไม่กี่วันเอง
ทำบล๊อกแบบนี้เยย คริๆ ว่างๆแวะไปดูหน่อยน้า หุหุ

อันนี้น่าสนกีแหะๆ เด๋วลองๆๆ

#11 By My name is Jung BoOKBik:: ฉันนี่แหละ เมียยุนโฮ:: on 2006-10-21 18:37

มะกี้ลืมๆ
ป.ล. จะทำให้แสดงแค่เอนที่เดียวทำไงหยอ - -

#12 By My name is Jung BoOKBik:: ฉันนี่แหละ เมียยุนโฮ:: on 2006-10-21 18:38

ว้าว ขอบคุณค่ะที่มาสอน

จะได้เอาไปลองทำดู

แต่ก้อยังแอบบงงโค้ดนิโหน่ย

จะพยายามค่ะ

#13 By Bluedog-หมาหน่อ- on 2006-10-21 19:39

ขอบคุณมากครับ~~

#14 By samta on 2006-10-21 19:47

ขอบคุงมากๆเรยอ่ะค่ะ
บล๊อคพี่สวยมากๆค่ะ

#15 By FaCeEloN on 2006-10-21 20:42

งะ...เหมือนจะง่ายนะฮะ^^"...(แต่ยังไม่เข้าใจเลย)

เอาฮะเอา..เอาเม้าท์TT^TT!!!

#16 By |$IllY_c@t| on 2006-10-21 21:15

อ๋อออออออออออออออออออออออออออ

#17 By || P u p p i i || on 2006-10-21 23:05

ขอบคุณค่ะ ในที่สุดคอร์สสอนทำCSSก็มาต่อซะที

อยากรู้วิธีทำเม้าส์เหมือนกัน
สอนเลยค่ะสอนเลย

แต่สำหรับเรากว่าจะได้ทำจริงๆ......เมื่อมีอารมณ์ทำอะนะ ก็แค่อยากรู้ไว้ก่อน

#18 By Kitt~13_แมวแดง แห่ง แก็งถั่วรั่ว on 2006-10-21 23:11

เอาค่ะ จะเอาวิธีทำเมาส์ เอาหมดเลยทำไมเก่งจ้งอ๊า...
มี่ยังทำไม่เป็นเลยอ่ะค่ะ ไอ้แค่สกอล์บาร์มันอยู่ตรงไหนเหรอคะ ทำแล้วมันเลื่อนหมดทั้งหน้าจอเลยอ่ะค่ะ แง๊ๆๆๆ
ตั้งรูป1010px แล้วมันก็ยังไม่ลงตัวอ่ะค่ะ เฮ่ออ ช่วยหนูด้วยค่า