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

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

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

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

שלבי העבודה:

1. כדי ליצור אלמנטים ב – Jquery יש להוריד את הסיפרייה מכאן ולשמור אותה במסגרת האתר.
   אפשר בתוך תיקיית JS (במקרה שלנו)
2. יש להוסיף את הקוד הבא בתוך ה – head של המסמך

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  

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

3. ניצור דף HTML שמכיל 4 לינקים טקסטואלים שמטרתם ליצור משחק בין 4 הרקעים בלחיצת כפתור
   כל לינק כזה ייקבל Class משלו בו נשתמש אח”כ בקריאה לפונקציה
   דוגמא:

   
   <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>
   
    

4. מבחינת ה – CSS, במקרה שלנו יצרנו DIV ובתוכו 4 כפתורים בתוך UL ב – Float Right
   כמובן שזה רק להמחשה. התאימו את ה – 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;
   }
   
    

   *שימו לב לכך שאיתחלנו את הדף כבר עם background image שנקרא: 01.png

5. עכשיו, על מנת להפעיל את הפונקציה יש להוסיף את הקוד הנ”ל גם באיזור ה – head של המסמך:

   <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>
   
    

   *זה למעשה הקוד שמוציא לפועל את הפונקציה ומבצע החלפה של ה – Background בכל לחיצה

במקרה הזה השתמשנו באופן הכתיבה – Inline Css , בגדול ניתן גם להשתמש ב – Classes ולעשות את אותו אפקט עם הוספה והסרה של Classes. ניתן גם לשנות צבע רקע וכו וכו.. כל זה ועוד בטוטוריאל הבא…

דמו | הורדה