נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

CSS Sprites

מחבר:
בתאריך:

CSS sprites משמשים כשרוצים להציג תמונות שונות לאותו אלמנט, ולחסוך בצורה משמעותית במספר הקריאות לשרת. ב-CSS Sprites ניתן לפגוש בכל מקום באינטרנט. לדוגמה: כשרוצים שהרקע לכפתורים באתר יתחלף בריחוף או בלחיצה, או כשרוצים לשנות מראה או צבע של חיצים. בוא נראה את הדוגמה הפשוטה הבאה. כדי לראות את האפקט נרחף מעל לתיבה הכחולה באמצעות העכבר.

 

 

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

 

הדגמה של CSS Sprites

 

הקוד שאפשר זאת הוא הקוד הבא. בוא נתחיל מהמצב שרק חלקה העליון של התמונה מוצג:

#image_sprite_1{
    background: url(images/tags.png) no-repeat;     
    background-position:0px 0px;
    height: 87px;
    width: 188px;
}

 

וכדי להציג את חלקה התחתון של התמונה במצב שמרחפים על הדמות עם העכבר, משתמשים בקוד הבא:

#image_sprite_1:hover{
    background-position:0px -91px;
}

הסוד הוא בשימוש בתכונת ה-background position ביחד עם הגדרת הרוחב והגובה (width ו-width .(height ו-height מגדירים את ממדיה של התמונה. ראו את המסגרת הירוקה והאדומה בתמונה למטה. background position מגדיר את המיקום ממנו צריך לקחת את התמונה, כשנקודת הייחוס (0, 0) היא הפינה השמאלית העליונה. הערך השמאלי מציין את המיקום על ציר ה-X, והערך הימני הוא המיקום על ציר ה-Y. במקרה זה, התמונה הכחולה מתחילה בנקודה 0 0 , והתמונה הכתומה מתחילה 91 פיקסלים למטה ממנה, ולכן השינוי הוא בציר ה-y בלבד.

 

הסבר מפורט על CSS Sprites

 

דוגמה נוספת לCSS Sprites

.בוא נראה דוגמה טיפה יותר מורכבת. הפעם עם חיצים. כשתעברו על החיצים תראו אותם מחליפים את צבעם:

אז איך עושים את הדבר המועיל הזה? התחלתי מציור של 4 חיצים בצבעים שונים, כפי שניתן לראות בתמונה המצורפת: 

 

CSS Sprites דוגמה נוספת עם חיצים

 

והשתמשתי בקוד הבא:

#up_arrow{background: url(images/arrows_sprites.png) no-repeat -43px 0;height:35px;width:40px;}
#up_arrow:hover{background-position:-43px -36px;}
#down_arrow{background: url(images/arrows_sprites.png) no-repeat 0 0;height:35px;width:40px; margin-top:10px;}
#down_arrow:hover{background-position:0 -36px;}

הרוחב והגובה מוגדרים על ידי width ו-height. נקודת הייחוס (0,0) נמצאת בפינה השמאלית העליונה. השורה הראשונה מתייחסת לחץ הכתום שמצביע למעלה, שממוקם 43 פיקסלים מימין לנקודת הייחוס ולכן background-repeat: -43px 0px. השורה השנייה מתייחסת לחץ הכחול שפונה למעלה, והוא ממוקם 36 פיקסלים למטה ובהתאם background-position: -43px -36px. בשורה השלישית והרביעית, החיצים שפונים למטה. שניהם מתחילים בקואורדינטה 0 של ציר ה-x, והחץ הכחול כלפי מטה ממוקם 36 פיקסלים מתחת לכתום.

 

עד כמה CSS Sprites שימושיים?

הטכניקה משמשת כמעט בכל אתר אינטרנט, ומכיוון שמדובר בטכניקה מימי CSS2 היא תואמת לכל הדפדפנים: Chrome, Firefox, Internet Explorer ו-Safari.

 

 

 

הוסף תגובה חדשה

 

= 9 + 4