เคอร์เซอร์: จาวาสคริปต์จับเมาส์

ฉันมีสองภาพ: หนึ่งภาพด้วยมือที่เปิดออก และอีกภาพหนึ่งด้วยมือที่คว้าไว้ ฉันหวังว่าฟังก์ชัน "onmousedown" และ "onmouseup" ธรรมดาๆ จะช่วยทำให้มืออันโด่งดังที่คุณมองเห็นได้ใน Google Maps แต่... ขออภัยตั้งแต่เริ่มต้น: ฉันมี DIV ธรรมดาๆ ที่ไม่มีอะไรเลย ยกเว้นพื้นหลังของเขา เมื่อฉันกดเมาส์ค้างไว้และเริ่ม "ลาก" เคอร์เซอร์ ฟังก์ชันควรจะเริ่มและเปลี่ยนรูปแบบเคอร์เซอร์ "เปิดมือ" เป็น "จับมือ" แต่เคอร์เซอร์กลายเป็นตัวเลือกสำหรับข้อความแทนที่จะเป็นสิ่งที่ฉันต้องการ ความช่วยเหลือใด ๆ ? นี่คือตัวอย่าง

<div onmousedown="function(){this.style.cursor='url(handgrab.png)'}"
onmouseup="function(){this.style.cursor='url(handopen.png)'}"
</div>

สิ่งเดียวที่ฉันต้องการคือเปลี่ยนเคอร์เซอร์เมื่อลากเมาส์เข้าไปใน DIV ขออภัยสำหรับการเลือกแบบอินไลน์นี้ แต่ฉันไม่ต้องการเขียนไฟล์ JS ทั้งหมด...


javascript drag cursor mousedown
person Nereo Costacurta    schedule 27.10.2012    source แหล่งที่มา
comment
โอเค ฉันได้ค้นพบปัญหาใหญ่แล้ว: สำหรับ div ฉันต้องตั้งค่าเหตุการณ์ onselectstart เป็น null (หรือคืนค่าเท็จ) เกมเสร็จแล้ว! หวังว่านี่จะเป็นประโยชน์สำหรับคนอื่นๆ แล้วพบกันใหม่   -  person Nereo Costacurta    schedule 30.10.2012

คำตอบ (1)


arrow_upward
-1
arrow_downward

คุณควรเข้าถึงสิ่งนี้ผ่านชื่อคลาส มันทำให้ชีวิตง่ายขึ้น

ลองวิธีนี้:-

HTML:

<div onmouseup="this.className='openHand'" onmousedown="this.className='closeHand'">
    Mouse Down and Up Events
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​

ซีเอสเอส:

.​openHand​ {
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

.closeHand {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}​

อ้างอิง สาธิตสด

person Siva Charan    schedule 27.10.2012
comment
ขอบคุณสำหรับคำตอบ ฉันมีปัญหาบางอย่างเนื่องจาก: 1) เมื่อลากเมาส์บน div โดยมีพื้นหลัง หลายครั้งที่ FireFox ถ่ายภาพแทนการเปลี่ยนเคอร์เซอร์ แต่บางครั้งก็ใช้งานได้ 2) ไม่มีทางด้วย Google Chrome มือที่ปิดไม่ปรากฏ 3) ดูเหมือนว่ามีเพียง IE9 เท่านั้นที่ทำงานได้อย่างถูกต้อง... เหลือเชื่อ - person Nereo Costacurta; 29.10.2012