מדריך ליצירת רול אובר בCSS - מהאתר של יהושוע

[ניק 5056]

קישור ישיר למאמר:
http://www.josh.co.il/?p=229#more-229



מדריך פשוט ליצירת אפקט "רולאובר" – (מעבר עכבר) לבוני אתרים. מבוסס על CSS. שיטה יעילה, חכמה ופשוטה, שאינה משתמשת ב-javascript, ופותרת בעיה נפוצה של זמן טעינת התמונה השניה.

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




נצטרך 3 דברים:

1. כפתור בצורת DIV, אותו נכניס בגוף הדף.
2. סגנון CSS מיוחד לכפתור, אותו נכניס בHEAD או בקובץ CSS חיצוני.
3. תמונה בודדת שתשמש לצורך האפקט.

כפתור

כך נראה תג הDIV של הכפתור:


<div id="roll"><a href="#">CLICK ME!</a></div>

</PRE>


</PRE>
</PRE>
בינתיים לא עשינו שום דבר מיוחד. הקסם מסתתר בסגנון ה-CSS שנקרא roll.

סגנון CSS

<CODE>#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;
}
</CODE>​

בסגנון הCSS הזה הגדרנו בשלב ראשון, שגודלו של הכפתור הוא 30X120 פיקסלים, הטקסט שבתוכו מיושר לאמצע, ויש לו תמונת רקע ששמה bg.gif (אותה נכיר מיד). הגדרנו גם שתמונת הרקע צמודה לתחתית הכפתור.
בשלב שני קבענו איך מתנהג לינק שנמצא בתוך הכפתור. -הוא תופס את כל שטח הכפתור. כלומר, ששטח הלינק מתפרש על פני כל שטח הכפתור ולא מצטמצם לגבולות הטקסט.
בשלב אחרון, קבענו שבמעבר עכבר על הלינק, תוצג אותה תמונת רקע, אבל היא תוצמד לראש הכפתור.
תמונה

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

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

 

[drvvv]

דרך אגב התפריט באתר של אפל בנוי כך, ובעגה המקצועית זה נקרא image Sprites (שדוני תמונה).

 

[Shlomi]

אפשר לעשות עם זה דברים מדהימים, מגהאפלד לדוגמה..