כהמשך ישיר לטוטוריאלס האחרונים בנושא Jquery ויצירת אלמנטים דינאמיים ומעניינים בדף אינטרנט, נלמד היום איך לשנות Background בדף אינטרנט בלחיצת כפתור.
החומרים הדרושים:
- דף HTML
- דף CSS למען הסדר הטוב
- Jquery Library
- Background images בתוך תיקית images
שלבי העבודה:
- כדי ליצור אלמנטים ב – Jquery יש להוריד את הסיפרייה מכאן ולשמור אותה במסגרת האתר.
אפשר בתוך תיקיית JS (במקרה שלנו) - יש להוסיף את הקוד הבא בתוך ה – head של המסמך [code lang=”js”] <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> [/code]
*לשים לב לנתיב ולשם הקובץ. יכול להיות שונה אצלכם.
- ניצור דף HTML שמכיל 4 לינקים טקסטואלים שמטרתם ליצור משחק בין 4 הרקעים בלחיצת כפתור
כל לינק כזה ייקבל Class משלו בו נשתמש אח”כ בקריאה לפונקציה
דוגמא: [code lang=”html”]<div id="main">
<ul id="nav">
<li><a href="javascript:;" class="bg1">Background 1</a></li>
<li><a href="javascript:;" class="bg2">Background 2</a></li>
<li><a href="javascript:;" class="bg3">Background 3</a></li>
<li><a href="javascript:;" class="bg4">Background 4</a></li></ul>
<div style="clear: both;"></div>
</div>[/code]
- מבחינת ה – CSS, במקרה שלנו יצרנו DIV ובתוכו 4 כפתורים בתוך UL ב – Float Right
כמובן שזה רק להמחשה. התאימו את ה – CSS לצרכיכם.
דוגמא: [code lang=”css”]body {
background-image: url(images/01.png);
}#main {
background-color: #eeeeee;
margin: auto;
width: 880px;
border: 1px solid #CCCCCC;
height: 500px;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}#nav a {
display: block;
color: #666666;
text-decoration: none;
margin: 0px;
padding: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
background-color: #e1e1e1;
}#nav li {
float: left;}
.yellow{
background: #FFCC00;
}[/code]
*שימו לב לכך שאיתחלנו את הדף כבר עם background image שנקרא: 01.png
- עכשיו, על מנת להפעיל את הפונקציה יש להוסיף את הקוד הנ”ל גם באיזור ה – head של המסמך: [code lang=”js”]
<script type="text/javascript">
$(document).ready(function () {$("a.bg1").click( function(){ $
("body").css("background-image","url(‘images/01.png’)");
});
$("a.bg2").click( function(){ $
("body").css("background-image","url(‘images/02.png’)");
});
$("a.bg3").click( function(){ $
("body").css("background-image","url(‘images/03.png’)");
});
$("a.bg4").click( function(){ $
("body").css("background-image","url(‘images/04.png’)");
});});
</script>[/code]
*זה למעשה הקוד שמוציא לפועל את הפונקציה ומבצע החלפה של ה – Background בכל לחיצה
במקרה הזה השתמשנו באופן הכתיבה – Inline Css , בגדול ניתן גם להשתמש ב – Classes ולעשות את אותו אפקט עם הוספה והסרה של Classes. ניתן גם לשנות צבע רקע וכו וכו.. כל זה ועוד בטוטוריאל הבא…