HTML/מפת תמונה

• ההקדמה לקוחה מהערך ניווט באתר אינטרנט מויקיפדיה.

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

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

בשתי הדוגמאות הבאות מפת תמונה הוא כלי ניווט טבעי, כמעט מתבקש מאליו.

שימוש נרחב ב-imagemap מתבצע באתר של מדריך הטיולים Lonely Planet, שבו המושג "מפת תמונה" מתפרש כפשוטו: מפות של יבשות ומדינות משמשות לניווט באתר, והניווט, במקרה זה, פשוט וטבעי. התמונה המוצגת היא תמונה פשוטה, ולכן קטנה יחסית, כך שהשפעתה על זמן טעינת הדף כמעט ואינה מורגשת. במקרה של imagemap שעשוי מתמונה גדולה ההשפעה של טעינת התמונה ניכרת למדי.

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

ניווט באתר משרד הביטחון

סוגים של מפת תמונה

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

מפת תמונה צד לקוח היא כזו בה המפה היא חלק ממסמך ה-HTML. עוד לפני שהמשתמש לוחץ על התמונה, הוא רואה בשורת הבקרה לאן הקישור מוביל. הדפדפן בעצם עושה בה את כל העבודה, וכך נחסך זמן עיבוד מהשרת. החסרון - חלק מהדפדפנים, בעיקר ישנים מאוד, אינם תומכים במפת תמונה צד לקוח. IE ו- Netscape תומכים בה החל מגרסה 2 ופיירפוקס מהתחלה.

הגדרת איזורים

נקודה נגדיר על ידי זוג מספרים שמופרדים בפסיק, x ו- y. למשל 200,300 היא נקודה שה-x שלה הוא 200 וה-y שלה הוא 300. ה-x מציין את המרחק האופקי מהשול השמאלי של התמונה. y מציין את המרחק האנכי מהשול העליון של התמונה.

על מנת להגדיר איזור במפת תמונה, נשתמש בשלוש צורות.

• מרובע, rect, מגדירים על ידי שתי נקודות. הראשונה היא הפינה השמאלית עליונה, והשניה היא הפינה הימנית תחתונה. מרובע לדוגמה: 200,300,250,350 הוא מרובע שנמתח מהנקודה 200,300 עד לנקודה 250,350. רוחבו 50 (250-200) וגובהו (350-300).

• עיגול, circle מגדירים על ידי מרכז ורדיוס. עיגול לדוגמה: 200,200,50 זהו מעגל שהמרכז שלו נמצא בנקודה 200,200 ורדיוס המעגל הוא 50.

• מצולע, פוליגון, poly מגדירים על ידי סדרה של נקודות. כל נקודה היא צומת במצולע. אין צורך לסגור את המצולע, המחשב יעשה את זה לבד. מצולע לדוגמה: 50,100,100,50,150,100,100,150 זהו ריבוע מסובב ב-45 מעלות. ניתן להגדיר מצולע בעל עד 100 נקודות.

יצירת מפת תמונה צד לקוח

קודם כל ניצור אלמנט תמונה, img שיהווה את הבסיס למפת התמונה שלנו.

<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" /></p>

אחר כך ניצור את המפה. אוסף האיזורים והקישור מכל איזור.

ניצור אלמנט map. חובה לתת לו את המאפיין id שכן נקרא לו מאלמנט img. שנית, חשוב מאוד לתת לו את המאפיין name ושערכו יהיה זהה לזה של id בשל סיבות של תאימות לאחור. לאחר יצירתו, נוסיף לאלמנט img את המאפיין usemap כשערכו הוא ה-id וה-name של map.

<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" usemap="MyMap" /></p>
<map id="MyMap" name="My Map" > </map>

בתוכו נשים אלמנטים מסוג area. חובה לשים לפחות אחד כזה. אלמנט area מגדיר אזור. לאיזור יש צורה מוגדרת ופעולה שמתבצעת כאשר לוחצים עליו.

• מאפיין חובה באלמנט area הוא alt - אלטרנטיבה לדפדפנים שאינם תומכים במפת תמונה.
• מאפיין חשוב הוא shape. ערך ברירת המחדל שלו הוא rect וניתן לתת לו אחד מארבעת הערכים: rect, circle, poly ו- default. השלושה הראשונים מגדירים צורות כפי שהצגנו בחלק על הגדרת צורות. הרביעי הוא איזור ברירת המחדל - כל פיקסל שלא מכוסה על ידי איזור אחר.
• עוד מאפיין חשוב הוא coords. ערכו הוא רשימה של קואורדינטות מופרדות על ידי פסיקים. מכיוון שכל קוארדינטה היא זוג מספרים מופרדים על ידי פסיקים, המאפיין הזה הוא בעצם רשימה של מספרים מופרדת על ידי פסיקים.
• במאפיין href ניתן את הקישור שאליו אנחנו רוצים להפנות את המשתמש אם הוא לחץ על האיזור.
• אם אנחנו לא רוצים לקשר מהאזור, ניתן להשתמש במאפיין הבולאני nohref בצורה הזו: nohref="nohref".

אלמנט area הוא אלמנט ריק.

<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" usemap="MyMap" /></p>
<map id="MyMap" name="My Map">
  <area shape ="rect" coords ="0,0,80,120" href ="מרובע.html" alt="מרובע" />
  <area shape ="circle" coords ="100,55,18" href ="עיגול.html" alt="עיגול" />
  <area shape ="poly" coords ="200,10,180,100,220,100" href ="משולש.html" alt="משולש" />
  <area shape ="poly" coords ="130,55,160,0,170,90,170,200,160,250" href ="מצולע.html" alt="מצולע" />
  <area shape ="default" href ="אחר.html" alt="אפשרות אחרת" />
</map>

• ל-area יש את מאפייני האירוע ומאפייני המיקוד, בעזרתם ניתן להגדיר אירועים שקשורים לאיזור.

ניווט

הפרק הקודם: יצירת מבניות במסמך

מפת תמונה תרגילים

הפרק הבא: הצהרת סוג מסמך