שינוי 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. ניתן גם לשנות צבע רקע וכו וכו.. כל זה ועוד בטוטוריאל הבא…

דמו | הורדה