המדריך לעיצוב סמן העכבר בעזרת CSS

בפרק זה של המדריך נלמד כיצד נוכל על פי רצוננו לשנות את מראהו של סמן העכבר בשעה שהמשתמש יעביר את העכבר מעל אלמנטים שונים בדף ה - HTML שלנו.

הגדרת סוג הסמן (Mouse Cursor)

היכולת להגדיר לדף שלנו או אף לאלמנטים בתוכו סמן עכבר שונה אינה קריטית לעיצוב האתר שלנו אולם לעתים השליטה בסמן העכבר עשויה להקל על המשתמש להבין תהליכים שונים בדף. למשל, בזמן טעינה של דף או חלק מדף שהינם כבדים וזמן טעינתם ארוך יחסית אזי זה יהיה נחמד אם נציג הודעה בנוסח "אנא המתינו, תוך מספר שניות הדף ייטען..." ויחד עם ההודעה לגרום לסמן העכבר להשתנות לסימן של המתנה.

את סוג הסמן נגדיר ב - CSS באמצעות התכונה Cursor. תכונה זו מקבלת מספר רב של ערכים שכל אחד מהם מאפשר להציג סוג סמן אחר. מלבד זאת התכונה גם מקבלת נתיב (path) לסמני עכבר שעיצבתם בעצמכם. להלן פירוט הערכים שהתכונה Cursor יכולה לקבל:

סוג ערך הסבר
auto הדפדפן מגדיר את סוג הסמן בצורה אוטומטית.
crosshair סמן בצורה של צלב המאפיין בדרך כלל כוונות טלסקופיות.
default ברירת המחדל.
e-resize הסמן מורה על כך שניתן להרחיב ימינה את האלמנט שמעליו עומד סמן העכבר. בדרך
כלל תהיה זו תיבת טקסט.
help הסמן מורה על כך שלאלמנט שמעליו עומדים יש קובץ עזרה.
move הסמן מורה על כך שהאלמנט בדף שמעליו עומדים ניתן להזזה.
n-resize הסמן מורה על כך שניתן להרחיב כלפי מעלה את האלמנט שמעליו העכבר עומד.
ne-resize הסמן מורה על כך שניתן להרחיב ימינה ולמעלה את האלמנט שמעליו העכבר עומד.
nw-resize הסמן מורה על כך שניתן להרחיב שמאלה ולמעלה את האלמנט שמעליו העכבר עומד.
pointer הסמן יהיה בצורת מצביע (יד ובה אצבע בצורת הצבעה).
progress הסמן מעיד על כך שהתוכנית טרם השלימה את פעולתה אך היא מתקדמת.
s-resize הסמן מעיד על כך שניתן להרחיב כלפי מטה את האלמנט שמעליו עומד סמן העכבר.
se-resize הסמן מעיד על כך שניתן להרחיב ימינה ולמטה את האלמנט שמעליו עומדים עם העכבר.
sw-resize הסמן מעיד על כך שניתן להגדיל שמאלה ולמטה את האלמנט שמעליו עומד העכבר.
text הסמן מקבל את הצורה האופיינית לאלמנטים כגון תיבת טקסט שבהם ניתן להקליד טקסט.
url נתיב אחד או יותר לסמנים. במקרה של יותר מנתיב אחד אזי יש לשים פסיק בין נתיב לנתיב.
w-resize הסמן מעיד על כך שניתן להרחיב שמאלה את האלמנט שמעליו העכבר עומד.
wait הסמן מעיד על כך שהתוכנית עסוקה.
inherit הסמן יקבל את צורת הסמן המוגדרת לאלמנט שבתוכו מקנן  האלמנט שמעליו עומד
העכבר.

להלן דוגמת קוד לשימוש בתכונה cursor עבור אלמנטים שונים בדף ה - HTML:

body{cursor:text;}
h1{cursor:help;}
h2{cursor:s-resize;}

   


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש