שינוי Background באמצעות Jquery

כהמשך ישיר לטוטוריאלס האחרונים בנושא Jquery ויצירת אלמנטים דינאמיים ומעניינים בדף אינטרנט, נלמד היום איך לשנות Background בדף אינטרנט בלחיצת כפתור.

החומרים הדרושים:

1. דף HTML
2. דף CSS למען הסדר הטוב
3. Jquery Library
4. Background images בתוך תיקית images

שלבי העבודה:

1. כדי ליצור אלמנטים ב – Jquery יש להוריד את הסיפרייה מכאן ולשמור אותה במסגרת האתר.
   אפשר בתוך תיקיית JS (במקרה שלנו)
2. יש להוסיף את הקוד הבא בתוך ה – head של המסמך [code lang=”js”] <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  [/code]

   *לשים לב לנתיב ולשם הקובץ. יכול להיות שונה אצלכם.

3. ניצור דף 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]

4. מבחינת ה – 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

5. עכשיו, על מנת להפעיל את הפונקציה יש להוסיף את הקוד הנ”ל גם באיזור ה – 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. ניתן גם לשנות צבע רקע וכו וכו.. כל זה ועוד בטוטוריאל הבא…

דמו | הורדה