הנך נמצא: החלפת תמונות / שיעור 1 / דף 1
 


המדריך של תאו ל- JavaScript
 


חילופי תמונות ב- JavaScript

דף 1.

אההה, JavaScript, שפה כל כך עשירה באפקטים. מיום היווצרה היא אפשרה לנו להתיר את הרסן ולנצל את מלא כוחו של הדפדפן. הקלילות שבכתיבת ה- script אפשרה לכל אחד להוסיף עושר אין-סופי לדפי ה- HTML שלו.

כן בטח ... אם אתה קורא לתקתוקי העכבר שלך חידושים. אני, למשל, לא. מאז השקתה של JavaScript - יחד עם Navigator 2.0 היא הייתה פחות ממרשימה, ולפעמים אפילו מציקה. אנשים השתמשו בה על מנת לפתוח חלונות קטנים, ביצוע משימות מעבר לפרגוד, או חיטוט במעשי המשתמש בדרכים שונות. היא לה הביאה אף בשורה מדהימה עד להשקת גירסת Navigator 3.0.

אחת מהתוספות הרבות לגירסה זו (1.1) היא היכולת לקרוא ולכתוב מתוף מערך אוביקטים, המכיל תמונות ולינקים. ובשפת ההדיוטות פרושו: האפשרות לשנות לינק או תמונה באופן מיידי! בואו נביט בדוגמא קטנה, ע"מ שנוכל להבין במה מדובר:

על מנת לעשות זאת, לא נזקקתי לתוספות (plug-ins) או קוד Java כלשהו, פשוט שלוש שורות קוד:

<script language="Javascript1.1">
  <!-- hide me
  function yaImgChange(imgNum,imgSrc)
  {
    document.images[imgNum].src = imgSrc;
  }
  // stop hidding -->
</script>

זה כל שנדרש על מנת לעשות את העבודה. על מנת להפעיל אותו עליך להשתמש בקוד ה- JavaScript. הקוד נראה כך:

<a href="javascript:nothingMuch();" onMouseOver="yaImgChange(7,'img1.gif');" onMouseOut="yaImgChange(7,'img2.gif');"> <img src="img1.gif"></a>

מה שעשיתי כאן היה לקרוא לפונקציה yaImgChange (המילה ya היא למעשה קיצור של Yet Another, כלומר: ובכ"ז דרך נוספת), עם שני משתנים. הראשון, לו קראתי imgNum, אומר לדפדפן איזה תמונה להציג למסך. הוא מיוצג ע"י מספר (במקרה זה 7) שהגעתי אליו ע"י ספירת התמונות בדף זה (מתחילים מלמעלה עם המספר אפס). למשתנה השני קראתי imgSrc, אשר מגדיר את מיקום התמונה אשר אותה ארצה להציג.

אז הפונקציה מצהירה שמערך התמונות בדף הנוכחי ישנה את הקוד של [imgNum] למה שמופיע ב- [imgSrc]. והנה, פונקציה כללית להחלפת תמונות.

עכשיו אתה יכול ליצור דוגמאות מסובכות יותר מזו. אבל, למרבית הצרכים הפונקצייה הזו מספקת. אני אוהב להשתמש בה בשילוב עם onMouseOver וכן עם onMouseOut, מכיוון שהן מספקות דרך טובה ליישום השינוי בתמונה. אולם חשוב לזכור שאפשר לשים אותם רק בתגי עוגן (anchor tags), כך שתאלץ להשתמש בהם סביב לתמונה אם תרצה שתתחלף. (זה לא הכרחי אם תיזום את השינוי ממקום אחר).

תוכל לשנות את הלינקים בעמוד שלך כמו גם את המקור של התמונות שלך. למעשה, אתה יכול לצרף אותם על מנת ליצור ממשק מורכב.

שינוי הלינקים עובד באופן דומה. הנה דוגמא. (זכור, הדוגמא תעבוד רק אם אתה משתמש ב- Navigator 3.0 ומעלה – כאשר JavaScript פעיל).

Mouse over one of these:
Taylor's site or Silly Blinking Lights.
Then click here.

כאן, יצרתי פונקציה yaHrefChange. היא פועלת בדויק כמו yaImgChange, פרט לעובדה שמעבירים את הלינק <a href> לפונקציה במקום <img src> עם מספר הלינק בדף (שוב, מתחילים לספור מלמעלה עם המספר אפס). הקוד נראה בערך כך:

function yaHrefChange(hrefNum,hrefHref)
{
  document.links[hrefNum].href = hrefHref;
}

במקום להסביר את הכל מחדש, אני אשאיר לך וליכולתך להביט בקוד דף זה, את האפשרות להבין מה בוצע. מלבד גאונותך, הכלי היחידי ובעל הערך הרב ביותר שתוכל לעשות בו שימוש במהלך המסע המפרח ללימוד JavaScript הוא היכולת להביט בקוד של אחרים. תגנוב, רבאק! תשדוד!

אבל מה עם Java? או Shockwave?

ובכן, עכשיו כשאתה יודע כיצד לעשות זאת אתה בוודאי תוהה ... איך זה נראה ב- Java או Shockwave? ובכן, זה תלוי. מבחינת מהירות JavaScript היא מהירה וקלילה. כמות הקוד הדרושה ע"מ להפעיל אפקט זה היא פחות מ- 1KBytes. ובנוסף הפענוח היחידי הנדרש הוא של הדפדפן ולא של כל תוכנת צד שלישי.

אבל, כפי שכבר ציינתי, האפקט עובד רק ב- Navigator 3.0 והלאה (כנראה). JavaScript עובד כבר מגירסא Navigator 2.0 או גירסת Internet Explorer 3.0. כך שייטב לך אם תפעיל זאת באמצעות Java. בנוסף מרבית המשתמשים נוטים לאפשר ל- Java לרוץ בעוד ש- JavaScript נותר חסום. כך שאם אתה בונה על האפקטים, עדיף שלא תעשה שימוש ב- Java.

טוב, סוף כל סוף, מספר שורות קוד בודדות, שעושות את ההבדל. רק תקפיד לחשוב, לפני הוספת אפקט, על הסיבה להוספתו, לפני הוספתו. אני בטוח שמי שחשבו על עשיית חלון נפתח חשבו שהם נמצאים עושים טריק מדהים, אבל אין דבר שחולף מהר, כמו טכנולוגיה מיותרת. בשימוש נכון, אנימצית תמונות יכולה להשיג בדיוק את האפקט לו אתה מחכה.

חזור לתחילת הדף

לגניבת קוד»

 
   
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר