วิธีเปลี่ยนเม้าส์ด้วยจาวาสคริปต์

เนื้อหา

• เคอร์เซอร์เมาส์พื้นฐาน
• เคอร์เซอร์เมาส์ที่กำหนดเอง
• การเปลี่ยนลักษณะเคอร์เซอร์ด้วย Javascript แบบอินไลน์
• เล่นกับฟังก์ชั่น

การเปลี่ยนเคอร์เซอร์ของเมาส์เป็นวิธีง่ายๆในการเพิ่มเอฟเฟกต์พิเศษลงในหน้าเว็บของคุณ สิ่งนี้สามารถปรับปรุงความสามารถในการใช้งานโดยการจัดหาสื่อโสตทัศน์เพิ่มเติมให้กับผู้ใช้โดยเฉพาะอย่างยิ่งในหน้าซับซ้อนเช่นเกมและแผนที่แบบโต้ตอบ คุณสามารถใช้ Javascript เพื่อเปลี่ยนรูปแบบเคอร์เซอร์ตามวันที่สภาพอากาศและสิ่งอื่นใด เทคนิคการใช้ Javascript, HTML และ CSS เพื่อสร้างเว็บเพจแบบไดนามิกนั้นเรียกว่า DHTML (Dynamic HTML)

เคอร์เซอร์เมาส์พื้นฐาน

มีเคอร์เซอร์ของเมาส์มาตรฐานหลายตัวที่สามารถใช้โดยการปรับเปลี่ยนสไตล์ขององค์ประกอบหรือเนื้อความของหน้า ชื่อเป็นค่าเริ่มต้นเล็งมือย้ายข้อความรอและความช่วยเหลือ ดูลิงก์ "คุณสมบัติเคอร์เซอร์ CSS" ในส่วน "ทรัพยากร" สำหรับรายละเอียดเพิ่มเติม ใช้ CSS เพื่อกำหนดเคอร์เซอร์ที่จะแสดงเมื่อผ่านองค์ประกอบดังนี้

กากบาท

เคอร์เซอร์เมาส์ที่กำหนดเอง

นอกเหนือจากเคอร์เซอร์พื้นฐานแล้วคุณสามารถใช้เทมเพลตที่กำหนดเองได้โดยการตั้งค่าที่อยู่ของไฟล์ภาพเป็นลักษณะเคอร์เซอร์ดังในตัวอย่างต่อไปนี้:

เคอร์เซอร์ที่กำหนดเอง

ไม่ใช่ทุกเบราว์เซอร์ที่สนับสนุนคุณสมบัตินี้หรือไฟล์ทุกประเภท ตัวอย่างเช่น Internet Explorer ต้องการไฟล์ที่มีนามสกุล ".cur" หรือ ".ani" Firefox ไม่ยอมรับเคอร์เซอร์แบบเคลื่อนไหว (".ani") และคาดว่าจะมีเคอร์เซอร์พื้นฐานนอกเหนือจากภาพ เพื่อผลลัพธ์ที่ดีที่สุดให้ระบุไฟล์เคอร์เซอร์ (".cur" หรือ ".ani") ไฟล์รูปภาพ (PNG, JPEG หรือ GIF) และประเภทเคอร์เซอร์พื้นฐานเป็นการสำรองข้อมูล ตัวอย่างต่อไปนี้ใช้เคอร์เซอร์แบบเคลื่อนไหวเป็นตัวเลือกแรกไฟล์แบบง่ายในตำแหน่งที่สองและเคอร์เซอร์พื้นฐานเป็นตัวเลือกสุดท้าย เบราว์เซอร์จะลองตัวเลือกทั้งหมดจนกว่าคุณจะพบตัวเลือกที่คุณสามารถใช้:

เคอร์เซอร์ที่กำหนดเอง

ไลบรารี Open Cursor ในส่วนทรัพยากรเสนอคอลเลกชันของเม้าส์เมาส์ฟรี

การเปลี่ยนลักษณะเคอร์เซอร์ด้วย Javascript แบบอินไลน์

คุณสามารถเปลี่ยนสไตล์ CSS ของเคอร์เซอร์โดยใช้ Javascript มีคุณลักษณะ HTML หลายอย่างที่เกี่ยวข้องกับการกระทำของเมาส์ที่สามารถใช้เพื่อเรียกใช้โค้ดโดยการคลิกย้ายหรือวางเมาส์เหนือองค์ประกอบของหน้า ตัวอย่างบางส่วนคือ:

onmouseover: ตัวชี้เมาส์ผ่านองค์ประกอบ onmousedown: กดปุ่มเมาส์ onmouseup: ปุ่มเมาส์ถูกปล่อยออกมา onmouseout: ตัวชี้เมาส์ออกจากองค์ประกอบ ondblclick: ผู้ใช้ดับเบิลคลิกเมาส์

ในส่วน "คุณสมบัติ" ของส่วน "คุณสมบัติ" คุณจะพบแอตทริบิวต์เพิ่มเติมที่คุณสามารถใช้เพื่อเพิ่มการกระทำด้วย Javascript

เพิ่มการกระทำให้กับกิจกรรม (เช่น "mouseover") โดยการตั้งค่ารหัสที่คุณต้องการเรียกใช้เป็นค่าของแอตทริบิวต์ ในตัวอย่างด้านล่างเคอร์เซอร์จะเปลี่ยนเป็น "ช่วย" โดยวางเมาส์เหนือลิงก์

ช่วย

เล่นกับฟังก์ชั่น

บางครั้งคุณอาจต้องการมากกว่าหนึ่งคุณสมบัติที่อนุญาต โดยการเขียนการกระทำทั้งหมดในฟังก์ชั่น Javascript คุณสามารถใส่รหัสทั้งหมดที่ด้านบนของเอกสาร HTML ของคุณและนำไปใช้กับองค์ประกอบใด ๆ โดยการโทรในแอตทริบิวต์เหตุการณ์ รหัสต่อไปนี้เปลี่ยนเคอร์เซอร์บนองค์ประกอบที่ส่งผ่านเป็นพารามิเตอร์ "el":

ฟังก์ชัน setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}

ฟังก์ชั่นจะอยู่ในส่วนของสคริปต์ของส่วนหัวของเอกสาร (ระหว่างแท็ก และ ) หรือในไฟล์รหัสภายนอกที่อ้างอิงในส่วนเดียวกัน หากต้องการใช้งานให้เรียกใช้ฟังก์ชันด้วยคำหลัก "this" จากแอตทริบิวต์เหตุการณ์ในแท็ก HTML ฟังก์ชั่นจะได้รับการอ้างอิงถึงองค์ประกอบที่เกี่ยวข้องกับเหตุการณ์เมาส์และจะเปลี่ยนรูปแบบเคอร์เซอร์ ตัวอย่างเช่นหากตัวชี้ข้ามไปที่ข้อความต่อไปนี้เคอร์เซอร์จะเปลี่ยน:

เคอร์เซอร์จะเปลี่ยนไปที่ลิงค์นี้

คุณยังสามารถเปลี่ยนเคอร์เซอร์หลักที่จะปรากฏเมื่อวางเมาส์เหนือส่วนล่างของหน้า ฟังก์ชั่นต่อไปนี้จะช่วยให้คุณเปลี่ยนเคอร์เซอร์เป็นประเภทที่ระบุไว้ในพารามิเตอร์ "curtype":

ฟังก์ชัน setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png) รอ"; แบ่งตัวพิมพ์เล็ก "ต้องห้าม": document.body.style.cursor = "url (ไม่พร้อมใช้งาน.), URL (ไม่พร้อมใช้งาน. png), ค่าเริ่มต้น"; แบ่งตัวพิมพ์เล็ก "default": default: document.body.style.cursor = "url (arrow.cur), default" GO}}

หากต้องการใช้งานให้เรียกว่า "กำลังโหลด", "ต้องห้าม" หรือ "ค่าเริ่มต้น" จากแอตทริบิวต์เหตุการณ์ในแท็ก HTML ตัวอย่างเช่นปุ่มต่อไปนี้จะเปลี่ยนเคอร์เซอร์เป็น "กำลังโหลด" เมื่อคลิก:

ภาษา Javascript มีฟังก์ชั่นไม่ จำกัด รหัสด้านล่างจะนับถอยหลังและทุก ๆ วินาทีจะเปลี่ยนเคอร์เซอร์ของเมาส์เป็นรูปภาพที่สัมพันธ์กับค่าปัจจุบัน ฟังก์ชัน "setTimeOut" จะออกจากฟังก์ชันที่ถูกระงับเป็นเวลาหนึ่งวินาทีก่อนที่จะถูกเรียกคืนและอัปเดตตัวนับ

ฟังก์ชั่น doCountdownCursor (นับ) {document.body.style.cursor = "url (" + นับ + ".ani), url (" + นับ + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1,000) GO} อื่น {document.body.style.cursor = "url (arrow.cur), ค่าเริ่มต้น" GO}}

บนเว็บเพจใช้ฟังก์ชันเพื่อแสดงจำนวนบนเคอร์เซอร์ของเมาส์เมื่อคุณคลิกปุ่มบนแบบฟอร์ม