קורס [HTML] | שיעור חמישי - מפת תמונה

קורס HTML / אוראל – שיעור חמישי: מפת תמונה

לפני שאתחיל, אני רוצה לומר כמה מילים.
כשאתם מנסים ללמוד משהו, ואתם לא מצליחים להבין אותו – למשל, משהו קשה במיוחד במתמטיקה – אני ממליץ לנגן ברקע מוזיקה שאתם אוהבים, להפסיק לרגע לפצח את הראש ולנסות לחתור לעבר ההיגיון בדבר הזה – שלב-שלב, לאט-לאט.
כנ"ל לגבי הקורס הזה. כאן אתם כמובן יכולים לפנות אליי אם אתם לא מבינים משהו או אם יש לכם שאלות בקשר לחומר הנלמד (אם תעשו את מה שאמרתי קודם ובכל זאת לא תבינו ).

שימו לב! התמונה הבאה לקוחה מוובמאסטר!

מפת תמונה – אלמנט המגדיר אזורים מסוימים בתמונה כקישורים. המבנה של מפת תמונה מתחיל בתג <map>. לתג הזה יש מאפיין אחד, והוא name, שמכיל את שם המפה. בין התג הפותח לתג הסוגר, יהיו תגי <area>.


המאפיינים של תג <area> הם:
alt מוצג כאשר אנו מניחים את העכבר על האזור המקושר בתמונה.
href מכיל את הכתובת אליה מפנה הקישור (כאשר לוחצים על האזור המקושר בתמונה).
nohref – במידה והאזור בתמונה לא צריך לקשר לשום מקום.
target קובע היכן יפתח הקישור. יכיל _blank על מנת לפתוח את הקישור בחלון חדש, או לא יופיע כלל על מנת לפתוח את הקישור באותו החלון (במקום החלון הנוכחי).
shape יכיל את סוג הצורה של השטח, מקבל אחד מהערכים הבאים: circle (עיגול), rect (מרובע), poly (מצולע), default (כל השטח שלא מוגדר - שאר השטח).
coords מכיל את הקואורדינטות (נקודות הציון) של השטח על המפה.

הערה: אינני יודע כיצד להגדיר אליפסה, ואני מניח שאין אפשרות לעשות זאת.

בשביל להוסיף תמונה נשתמש בתג <img> שכבר הכרתם, אבל נוסיף לו מאפיין שלא דיברנו עליו עד עכשיו, והוא usemap. usemap מקבל את שם המפה שמתאימה (שמופיע אצלה אותו השם במאפיין name של התגית map). שימו לב שבתמונה עצמה, השם (במאפיין usemap) צריך לבוא אחרי הסימן #.

כך נראה קוד לדוגמא של מפת תמונה (כאן זה ללא קשר ממשי בין האזורים בתמונה לבין הקישורים שלהם, אך מבהיר את הכוונה):

הפינה השמאלית העליונה היא X=0 ו-Y=0. דמיינו שאנחנו מחזיקים עט דמיוני ומציירים.

קואורדינטות של עיגול יהיו משמאל לימין: x של מרכז המעגל, y של מרכז המעגל, והרדיוס של המעגל.
קואורדינטות של מרובע יהיו משמאל לימין: left, top, right, bottom. הסבר יותר מפורט, משמאל לימין: x של הצד השמאלי של המרובע, y של הצד העליון של המרובע, x של הצד הימני של המרובע, y של הצד התחתון של המרובע.
קואורדינטות של מצולע יהיו x ו-y של כל קודקוד במצולע.


פלישה של צורה אחת לשטח של צורה אחרת
במידה וצורות שהגדרנו "פולשות לשטח של צורה/צורות אחרת/אחרות", הצורה שהוגדרה לפני תתפוס את השטח המדובר.

דוגמא:

כאן הגדרנו מרובע שמתחיל מהקצה השמאלי-עליון של התמונה, ומימדיו הם 100X100.
אחריו הגדרנו עיגול אשר מרכזו נמצא באמצע המרובע שהגדרנו מקודם (x=50 y=50) והרדיוס שלו הוא 50.

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

מה שכן, אם נעשה כך (נגדיר את העיגול לפני המרובע):

השטח יהיה של העיגול, והשטח של המרובע יהיה מסביב לעיגול.
(מוזמנים לנסות).

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

תרגול
הפעם יש לי עבורכם תרגול מעצבן או מהנה, תחליטו לבד.
זוכרים את התמונה בתחילת השיעור?
ובכן, כתבו מפת תמונה לתמונה הבאה:

אני רוצה שכל אחת מהצורות הבאות בתמונה הנ"ל תקשר למקום אחר: המרובע הכחול, העיגול האדום, המרובע הוורוד, העיגול התכלת, המרובע הצהוב והמרובע האפור.
נסו לדייק כמה שאפשר, אבל השתמשו במספרים המסתיימים ב-5 או 0, כי יש לי מצב רוח טוב.

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

אז.. בהצלחה לכם. :)