שיעור 2
דף 9: החלפת תמונות.
אחד מהמאפיינים שהשימוש בהם הוא מאוד נפוץ ב- Javascript, הוא היכולת לשנות את התמונות בעת מעבר סמן העכבר מעל התמונה. לרע מזלנו, Microsoft Internet Explorer 3.0 אינו תומך בתכונה זו. כך שאם אתה עושה שימוש בדפדפן זה, אולי הגיע הזמן לשדרג לגירסא 4 או לעבור ל- Netscape.
דוגמא ראשונה ומהירה לפנינו. בואו נעבור על הדוגמא צעד צעד.
השורה המעניינת הראשונה היא:
<img src="button_r.gif" name="the_image">
שורה זו, ממש כמו הפקודה הרגילה <=img src> מלבד העובדה שניתן להעניק לה שם: the_image. שם זה יכול להיות כל דבר, אבל אסור שיהיו בו רווחים.
השורה המעניינת הבאה היא:
<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>
כאן למעשה, החלפת התמונה מתרחשת. ממש כמו onMouseOver שראינו קודם. החלק הפעיל של קוד Javascript המופיע בגרשיים של onMouseOver הוא:
document.the_image.src='button_d.gif';
הצהרה זו משמעה, מצא את התמונה ששמה 'the_image' והחלף את המקור שלה (src) ל- 'button_d.gif'. שים לב שיש גרשיים סביב כל הבטוי, וסביב 'button_d.gif' יש גרש בודד. למרות שניתן להחליף בין סימני הגרשיים, אם יש גרשיים בתוך גרשיים הם צריכים להיות שונים זה מזה. כלומר, תוכל לרשום " 'משהו' " או אפילו ' "משהו" ' אבל לא " 'משהו" ' או ' "משהו' ". הבנת?
ממש כשם שהיו הרבה פרטים "לא חשובים" הקשורים במה שגורם לפקודה ()document.writeln לעבוד, כך גם הפעם לא ממש נפרט כיצד הפקודה "עובדת". תלמד בדיוק כיצד היא עובדת כשנלמד על תכנות מונחה עצמים (object oriented) ובניית מודלים (document objecy model) בשיעור הבא.
חשוב להזהיר שעל שתי התמונות המוחלפות להיות זהות בגודלן. אם לא, הן עלולות להימרח או להימתח על מנת להתאים לגודל התמונה המקורית.
כעת אתה מוכן לשיעורי הבית של היום.
חזור לתחילת הדף
לדף הבא «--
|
