תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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 שימושיים?

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

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

ברשת האינטרנט קיימים CSS sprites generators חינמיים שמקלים מאוד על יצירת sprites בשביל הפרויקט שלכם. אני מאוד אוהב להשתמש בשירות הבא CSS sprites generator by TopTal.

 

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?