אפקט Rollover (מעבר עכבר) ניתן ליצור בעזרת CSS בלבד ע”י שימוש ב – pseudo-classes מסוג Hover. ניתן לשים תמונה וב – hover לדאוג להציג תמונה אחרת וכו.. אבל מה אם נרצה ליצור משהו קצת יותר מעניין? אולי Rollover עם אנימציה, Fading וכו…
בעזרת Jquery ניתן לייצר אנימציה ואפקטים בשימוש של Java Script בלבד (ללא פלאש).ישנם לא מעט יתרונות בשימוש של Jquery על גבי שימוש בFlash, אין צורך להכנס לFlash כדי לערוך את האנימציה, האינטגרציה עם קוד היא הרבה יותר פשוטה, האלמנטים ב- HTML ו – CSS נשארים שקופים למנועי חיפוש וכו’ ( ישנם יתרונות נוספים אך לא נרחיב עליהם כעת ).
בפוסט הבא ניצור אפקט Rollover על תמונות לצורך יצירת מעבר מונפש ממצב אחד לשני, ניתן להשליך את זה בקלות לכל מטרה אחרת כולל בניית תפריט ניווט עם מעברי עכבר ועוד אינספור אפשרויות.
התוצא הסופית תראה כך:
- בשלב הראשון יש להוריד את ספריית Jquery מכאן
להעתיק את הקוד ולשמור בתיקיית העבודה כקובץ Javascript
במקרה שלי אני שומר על שם הקובץ המדוייק: jquery-1.4.2.min.js
ניתן גם לשמור בתיקייה לשם הסדר הטוב (לדוגמא js/jquery-1.4.2.min.js) - יש להוסיף את הקריאה הבאה לקובץ בתוך דף ה- HTML שבו נייצר את ה”גלריה” באיזור ה – head של המסמך:[code lang=”js”]
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>[/code]
*יש לשים לב לנתיב הקובץ. יכול להשתנות אצל כל אחד!
- השלב הבא יהיה ליצור UL שבתוכו יופיעו התמונות אחת אחרי השניה כל אחת עטופה ב LI – הדרך להשתמש ב – UL LI חשובה על מנת ליצור המשכיות, סדר ויכולת עדכון מהירה, כל אימא’ג שנרצה להוסיף יכנס לתוך LI חדש. HTML:[code lang=”html”]
<div id="wrapper">
<ul>
<li>
<a href="#"><img src=’images/image11.jpg’/>
<span><img src=’images/rollover11.jpg’/></span> </a></li><li>
<a href="#"><img src=’images/image21.jpg’/>
<span><img src=’images/rollover21.jpg’/></span> </a></li><li>
<a href="#"><img src=’images/image31.jpg’/>
<span><img src=’images/rollover31.jpg’/></span> </a></li>
</ul>
</div>[/code]
*יש לשנות את שמות התמונות וה- Rollover של כל אחת אצלכם!
- על מנת להחיל את האפקט על התמונות יש להוסיף את הקוד הבא בתוך איזור ה – head של המסמך:[code lang=”js”]
<script type=’text/javascript’>
$(function(){
$(".gallery a").hover(function(){
$(this).children("span").fadeOut();
}, function(){
$(this).children("span").fadeIn();
})
});
</script>[/code]
*הסבר: השתמשנו בתגית span על מנת “להסתיר” בתוכה image שנרצה שיופיע במעבר עכבר
ואח”כ יצרנו פונקציה שמכילה שני אפקטים fadeIn ו – fadeOut פעם לחשוף את ה – rollover ואח”כ לחזור לתמונה הרגילה - להלן ה – CSS:[code lang=”css”]
body{font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#FFF; margin:0px; padding:0px; background-color:#000}
#wrapper{width:900px; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; background-color:#666}ul.gallery{margin:0px; padding:0px; list-style-type:none}
ul.gallery li{width:300px; height:200px; float:left; padding:0px; margin:0px}
ul.gallery li a{display:block; position:relative}ul.gallery li a img{position:absolute; z-index:1; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none}
ul.gallery li span{display:block; height:200px; width:300px; position:absolute; z-index:2}
[/code]
- במקרה שלנו 3 התמונות בגודל 300X200 פיקסל והתוכן על 900 שזה יהיה מדויק.
כמובן שניתן לשנות את הגדלים בהתאם לצרכים שלכם.
אחלה פוסט. יופי של אפקט.
מדריך מעולה! יפה מאוד.