דפים בשיעור זה:
1: JavaScript מתקדם
2: תמונת מפה
3: טעינה מוקדמת א
4: טעינה מוקדמת ב
5: הרפתקת האובייקט
6: יצירת אובייקט אישי
7: חיית מחמד וירטואלית
8: הערכת מחרוזות
9: אובייקטים קשים א
10: אובייקטים קשים ב
11: חזרה על שעור 4
|
|
|
|
|
|
|
|
|
|
|
|
| |
שיעור 4
דף 2: תמונת מפה ו- JavaScript
תמונת מפה מורכבת היא תמונה המורכבת מאזורים, כאשר לכל אזור יש היפר קישור (Hyperlink) משויך. לחיצה על אזור אחד לוקחת אותך אל האזור המשויך. להלן דוגמא בסיסית, שנלקחה (וקצת שונתה) משעורו של פטריק קורקוראן (Patrick Corcoran) על תמונת מפה.
למרות שזוהי תמונה יחידה, לפטריק יש אזורים ספציפים בתמונה שקושרו ל-HREFs שונים. אתה רואה תמונת מפות בכל מקום, בעיקר כאלמנט ניווטי. אם אינך מכיר אותם, קרא את המדריך של פטריק על תמונות מפה בצידו של הלקוח. כחזרה מהירה, להלן קוד ה-HTML עבור תמונת המפה למעלה:
<IMG SRC="my_image.gif" border=0 WIDTH=160 HEIGHT=140 ismap usemap="#foo">
<map name="foo">
<area name="yellow" href="Yellow.html" coords="20,20,70,60">
<area name="red" href="Red.html" coords="90,20,140,60">
<area name="blue" href="Blue.html" coords="20,80,70,120">
<area name="green" href="Green.html" coords="90,80,140,120">
</map>
שים לב כי התוויות <img src> הינו בעל אלמנט "usemap="#foo. אלמנט זה מנחה את התמונה לחפש אחר תווית מפה אשר נקראת "foo" ומייחסת את אותה מפה לתמונה. המפה יכולה להיות בכל מקום על העמוד, אבל בדרך כלל נוח יותר לשים את המפה קרוב לתמונה, כמו שאתה רואה כאן, כך שיהיה יותר קל עבורך להבינה.
למפה יש תוויות התחלה "begin" ותווית סיום "end", עם קבוצה של תוויות אזורים באמצע. כל תווית אזור מגדירה את גבולותיה בעזרת coords element (קואורדינטות) ומקצה לאזור זה HREF. אלמנט ה-coords הינו מחרוזת של מספרים, אשר כל אחד מהם מייצג פיקסל בתמונה. כאשר מגדירים מרובע, הפיקסלים צריכים להיות רשומים בסדר הבא: עליון שמאלי, עליון ימני, תחתון שמאלי, תחתון ימני. שוב, בדוק בשעורו של פטריק אם הנ"ל אינו הגיוני עבורך.
הוספת JavaScript לתמונות מפות אלו הנה קלה כמו הוספתם ל-HREF. למעשה, JavaScript מתייחסת לתוויות אזורים באופו כמעט זהה כמו שהיא מתייחסת ל-HREF. אתה יכול לשים onClicks, onMouseOvers, onMouseOuts בתווית אזור, והם יעשו בדיוק את מה שציפית. אזהרה אחת: onClick אינה עובדת עם Navigator 3.0 בסביבת חלונות. להלן הדוגמא שלמעלה, עם תוספה קטנה של JavaScript.
קוד ה- Java Script של המפה המורחבת נראה כך:
<map name="javascript_foo">
<area name="yellow" href="Example1_Files/Yellow.html" onMouseOver="writeInForm('You choose yellow');" coords="20,20,70,60">
<area name="red" href="Example1_Files/Red.html" onMouseOver="writeInForm('You choose red');" coords="90,20,140,60">
<area name="blue" href="Example1_Files/Blue.html" onMouseOver="writeInForm('You choose blue');" coords="20,80,70,120">
<area name="green" href="Example1_Files/Green.html" onMouseOver="writeInForm('You choose green');" coords="90,80,140,120">
</map>
זה די דומה למקור; השוני היחיד הוא שבכל כל תווית אזור (<area> tag) מוגדר onMouseOver אשר קורא לפונקציה שאני כתבתי, הנקראת ()writeInForm אשר נראית כך:
<script language="JavaScript">
<!-- hide me
function writeInForm(text_to_write)
{
window.document.the_form.the_text.value= text_to_write;
}
// show me -->
</script>
פשוט, אה? על מנת שנוכל לעבור למשהו מעט יותר מורכב, נלמד קודם כיצד איך מבצעים טעינה מוקדמת של תמונות בעזרתה האדיבה של JavaScript.
חזור לתחילת הדף
לדף הבא «--
|
|
