תוֹכֶן
שינוי סמן העכבר הוא דרך פשוטה להוסיף אפקטים מיוחדים לדף האינטרנט שלך. זה יכול לשפר את השימושיות על ידי מתן למשתמשים עם עזרים חזותיים נוספים, במיוחד על דפים מורכבים יותר כמו משחקים מפות אינטראקטיביות. ניתן להשתמש ב- Javascript כדי לשנות את הסמן על פי התאריך, מזג האוויר וכל דבר אחר. הטכניקה של שימוש ב- JavaScript, HTML ו- CSS ליצירת דפי אינטרנט דינמיים ידועה בשם DHTML (Dynamic HTML).
עכבר Cursors בסיסי
ישנם מספר סמנים העכבר רגיל שניתן להשתמש בהם על ידי שינוי הסגנון של אלמנט או את הגוף של הדף. השמות הם ברירת מחדל, Crosshair, יד, העברה, טקסט, המתנה ועזרה. עיין בקישור "CSS Cursor Property" בקטע "משאבים" לקבלת פרטים נוספים עליהם. השתמש ב- CSS כדי להגדיר את הסמן שיוצג בעת העברת אלמנט כדלקמן:
צלב-שיער
סמני עכבר מותאמים אישית
בנוסף לסמנים הבסיסיים, באפשרותך להשתמש בתבניות מותאמות אישית על-ידי הגדרת הכתובת של קובץ תמונה כסגנון הסמן, כמו בדוגמה הבאה:
סמן מותאם אישית
לא כל הדפדפנים תומכים בתכונה זו או בכל סוגי הקבצים. לדוגמה, Internet Explorer מצפה לקבצים עם סיומת ".cur" או ".ani". Firefox אינו מקבל סמנים מונפשים (".ani") ומצפה לסמן בסיסי מעבר לתמונה. לקבלת תוצאות מיטביות, ציין קובץ סמן (".cur" או ".ani"), קובץ תמונה (PNG, JPEG או GIF) וסוג סמן בסיסי כגיבוי. הדוגמה הבאה משתמשת סמן אנימציה כמו הבחירה הראשונה, קובץ פשוט במקום השני, ואת הסמן הבסיסי כאפשרות האחרונה. הדפדפן ינסה את כל האפשרויות עד שתמצא אחת שתוכל להשתמש בה:
סמן מותאם אישית
ספריית הסמן הפתוח במקטע משאבים מציעה אוספים של סמני עכבר חופשיים.
שינוי סגנון הסמן עם Inline Javascript
ניתן לשנות את סגנון CSS של הסמן באמצעות Javascript. קיימות מספר תכונות HTML הקשורות לפעולות עכבר שניתן להשתמש בהן לביצוע קוד על-ידי לחיצה על, הזזה או ריחוף מעל אלמנט דף. דוגמאות לכך הן:
onmouseover: מצביע העכבר עובר מעל אלמנט. onmousedown: לחצן העכבר נלחץ. onmouseup: לחצן העכבר משוחרר. onmouseout: מצביע העכבר יוצא מהאלמנט. ondblclick: המשתמש לוחץ פעמיים על העכבר.
בקטע "תכונות" בקטע "תכונות" תמצא תכונות נוספות שבהן תוכל להשתמש כדי להוסיף פעולות עם Javascript.
הוסף פעולה לאירוע (לדוגמה, "mouseover") על ידי הגדרת הקוד שברצונך להפעיל כערך התכונה. בדוגמה הבאה, הסמן ישתנה ל"עזרה "על ידי העברת העכבר מעל הקישור.
עזרה
משחק עם פונקציות
לפעמים, תרצה לעשות יותר מתכונה אחת. על ידי כתיבת כל הפעולות בפונקציה Javascript, אתה יכול לשים את כל הקוד בחלק העליון של מסמך ה- HTML שלך ולהחיל אותו על כל רכיב על ידי ביצוע שיחה במאפיין האירוע. הקוד הבא משנה את הסמן על הרכיב המועבר כפרמטר "el":
הפונקציה setElementCursor (el) {el.style.cursor = "כתובת האתר (3DArrow.cur), crosshair" GO}
הפונקציה תופיע בקטע הסקריפט של כותרת המסמך (בין התגים
ו ) או בקובץ קוד חיצוני המפנה באותו חלק. כדי להשתמש בו, התקשר לפונקציה עם מילת המפתח "this" מתכונה event בתג HTML. הפונקציה תקבל התייחסות אלמנט המשויך לאירוע העכבר ותשנה את הסמן. לדוגמה, אם המצביע מדלג על הטקסט הבא, הסמן משנה:הסמן ישתנה על קישור זה
ניתן גם לשנות את הסמן הראשי שיוצג בעת העברת העכבר מעל לתחתית הדף. הפונקציה הבאה תאפשר לכם לשנות את הסמן לסוג המצוין בפרמטר "curtype":
הפונקציה setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "כתובת האתר (work.ani), url (working.png), wait"; לשבור מקרה GO "אסור": document.body.style.cursor = "כתובת האתר (unknown.ani), url (unavailable.png), ברירת המחדל"; Break "ברירת המחדל": ברירת המחדל: document.body.style.cursor = "כתובת אתר (arrow.cur), ברירת המחדל" GO}}
כדי להשתמש בה, קרא לה "טעינה", "אסור" או "ברירת מחדל" מתכונה event בתג HTML. לדוגמה, הלחצן הבא ישנה את הסמן ל- "טוען" כאשר לוחצים עליו:
שפת Javascript יש פונקציונליות בלתי מוגבלת. הקוד שלהלן יספור וכל שנייה תשנה את סמן העכבר לתמונה המשויכת לערך הנוכחי. הפונקציה "setTimeOut" תשאיר את הפונקציה מושעה למשך שנייה אחת לפני שתזכרו אותה ותעדכנו את הדלפק.
(URL) (+ + count) .png), url (+ + count) .png) ("+ count +"), 1000) GO {else.body.style.cursor = "url (arrow.cur), ברירת מחדל" GO}}
בדף האינטרנט, השתמש בפונקציה כדי להציג את הספירה על סמן העכבר בעת לחיצה על לחצן בטופס.