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

דמו | הורדה

  1. היי דניאל.
    בהחלט נכון. ניתן לעשות לא מעט אפקטים נוספים
    במאמר הזה ניסינו לתת את הבסיס ולא לסבך מידי
    נשמח להרחיב על כך במאמרי המשך.. תודה:)

כתיבת תגובה

האימייל לא יוצג באתר.

to top