מדריך פשוט ליצירת אפקט "רולאובר" – (מעבר עכבר) לבוני אתרים. מבוסס על CSS. שיטה יעילה, חכמה ופשוטה, שאינה משתמשת ב-javascript, ופותרת בעיה נפוצה של זמן טעינת התמונה השניה.
קיימות טכניקות מגוונות ליצירת אפקט "רולאובר" (מעבר עכבר), רובן נעזרות בג'אווה-סקריפט כדי להחליף תמונה מסוימת באחרת.
חיסרון אחד בטכניקה זו הוא, שהתמונה השניה נטענת רק כאשר המשתמש עובר עם העכבר מעל לכפתור, מה שיוצר תופעה לא רצויה של עיכוב במשך הטעינה של תמונת מעבר העכבר.
חיסרון שני הוא שישנם גולשים שחוסמים ג'אווה-סקריפט, והם לא יוכלו ליהנות מהרולאובר.
במדריך זה, נשתמש בגליונות עיצוב (CSS) כדי ליצור אפקט מעבר עכבר שמשתמש בתמונה בודדת כדי ליצור אפקט רולאובר מוצלח.
נצטרך 3 דברים:
- כפתור בצורת DIV, אותו נכניס בגוף הדף.
- סגנון CSS מיוחד לכפתור, אותו נכניס בHEAD או בקובץ CSS חיצוני.
- תמונה בודדת שתשמש לצורך האפקט.
כפתור
כך נראה תג הDIV של הכפתור:
<div id="roll"><a href="#">CLICK ME!</a></div>
בינתיים לא עשינו שום דבר מיוחד. הקסם מסתתר בסגנון ה-CSS שנקרא roll.
סגנון CSS
#roll
{
text-align:center;
line-height:30px;
height:30px;
width:120px;
background:url(bg.gif) bottom;
}
#roll a
{
text-align:center;
line-height:30px;
height:30px;
width:120px;
display:block;
}
#roll a:hover
{
text-align:center;
line-height:30px;
height:30px;
width:120px;
display:block;
background:url(bg.gif) top;
}
בסגנון הCSS הזה הגדרנו בשלב ראשון, שגודלו של הכפתור הוא 30X120 פיקסלים, הטקסט שבתוכו מיושר לאמצע, ויש לו תמונת רקע ששמה bg.gif (אותה נכיר מיד). הגדרנו גם שתמונת הרקע צמודה לתחתית הכפתור.
בשלב שני קבענו איך מתנהג לינק שנמצא בתוך הכפתור. -הוא תופס את כל שטח הכפתור. כלומר, ששטח הלינק מתפרש על פני כל שטח הכפתור ולא מצטמצם לגבולות הטקסט.
בשלב אחרון, קבענו שבמעבר עכבר על הלינק, תוצג אותה תמונת רקע, אבל היא תוצמד לראש הכפתור.
תמונה
כפי שציינתי, התמונה מכילה את שני המצבים. אבל לא רק שהיא מכילה את שני המצבים, אלא שיש פה טריק נוסף, היא רק ברוחב פיקסל אחד. מה שגורם לה להיות קלה במיוחד. ובכן, הנה היא לפניכם: bg.gif
כן, זה הכל… תמונה ששוקלת פחות מק"ב בודד. חציה התחתון מוצג לפני מעבר העכבר, וחציה העליון, מוצע במעבר העכבר. (כשהיא מתוחה לרוחב של 120 פיקסלים.)
זה כל הטריק. מעבר עכבר קליל, יעיל חסכוני בקוד ובמשקל ומתאים לכל דפדפן מודרני התומך בCSS.
אוקטובר 17th, 2009 ב- 9:40
אגב, במקום top או bottom ניתן להשתמש במיקומים יחסיים בפיקסלים. השימוש בשיטה הזו מאפשר לייצג למשל את כל האיקונים של האתר בעזרת תמונה אחת בלבד במקום הרבה תמונות.
אוקטובר 17th, 2009 ב- 22:32
אבחנה מעניינת מאוד ניצן.
זו דוגמה מצויינת שממחישה איך שימוש מושכל ב-CSS משנה את צורת החשיבה המיושנת שאפיינה בניית אתרים בעבר.
אוקטובר 27th, 2009 ב- 11:24
לצורך העניין, ה-DIV מיותר לחלוטין. הגדרת את הלינק כ-BLOCK, אין שום סיבה לעטוף אותו בשום אלמנט אחר.
ינואר 3rd, 2010 ב- 15:31
יפה מאוד, רק לא רשמת איך ניתן לעשות את זה במאוזן
אשמח אם תוסיף איך לשנות את הרול אובר שיהיה מאוזן, תודה.