מפת תמונה היא תמונה שאזורים מסוימים בה הם קישורים.
ישנן כמה שיטות ליצירת image map. אחת מהן דורשת את תמיכת השרת (שעליו נמצא האתר) ב-CGI, האחרת כוללת הכנת קובץ של תמונה, כך שהקישורים כבר מובנים בתוכו, בעזרת תכנה מיוחדת. זו שתוסבר כאן, היא הפשוטה ביותר. בשיטה זו גורמים למפת הקישורים להיווצר על ידי שיוך קישור נפרד לכל חלק בתמונה, לפי קואורדינאטות שאנו קובעים.
המבנה של מפת תמונה מתחיל בתג map. לאובייקט זה מאפיין אחד - id, המכיל את שם המפה. בין התג הפותח לתג הסוגר, יהיו תגי <area>.
לאחר שהגדרנו את המפה, נגדיר את התמונה בה תופיע המפה, תוך הוספת מאפיין חדש – usemap.
usemap מקשר בין התמונה לבין המפה (מקבל את שם המפה המתאימה לתמונה). שימו לב שלפני השם צריך לבוא הסימן #.
כך יראה קוד של מפת תמונה:
<map id="myMap"> <area shape="circle" coords="200,100,50" href="page1.html" alt="page1"> <area shape="rect" coords="0,0,100,100" href="page2.html" alt="page2"> <area shape="default" nohref=""> </map>
<img src="images/mymap.jpg" usemap="#myMap" width="300" height="200" />
הקוד הוא פשוט למדי:
הוא מתחיל בתג <map>
שורת הקוד הבאה מתחילה את הגדרת אזורי הקישור במפה. השורה תתחיל מהתג <area> אשר בתוכו תוגדר צורתו של האזור המקושר, הקואורדינאטות שביניהן יפעל הקישור, הקישור עצמו, כלומר ה- url לדף אליו יגיע הלוחץ על האזור הזה במפה, והטקסט שיופיע ב tooltip באותו איזור.
סדר המספרים בכל הגדרת קואורדינאטות הוא חשוב מאד, מאחר שהוא קבוע:
coords="left-start-point, up-start-point, left-end-point, up-end-point"
הקואורדינאטות 0,0 יהיו תמיד הפינה השמאלית העליונה של התמונה. לכן, left-start-point, up-start-point, יהיו הנקודה בתמונה שממנה יתחיל האזור הרבוע שאנו רוצים לקשר, ו up-end-point ,tniop-dne-tfel תהיה הנקודה שבה יסתיים האזור.
הקואורדינאטות נמדדות בפיקסלים. הקואורדינאטות נמדדות תמיד משמאל לימין, ומלמעלה כלפי מטה.
הגדרת המפה נסגרת בתג <map/> והשורה האחרונה מגדירה את התמונה שתשמש אותנו כמפה.
המאפיינים של אובייקט map הם:
- alt מכיל תיאור קצר של הקישור.
- href מכיל את הכתובת שאליה מפנה הקישור.
- nohref במידה והאיזור לא צריך לקשר לשום מקום.
- target היכן יפתח הקישור. יכיל _blank בשביל לפתוח את הקישור בחלון חדש.
- shape יכיל את סוג הצורה של השטח, מקבל אחד מהערכים הבאים: circle (עיגול), rect (מרובע), poly (מצולע), default (כל השטח שלא מוגדר).
- coords מכיל את הקואורדינטות של השטח על המפה.
קואורדינאטות של עיגול יהיו x של מרכז המעגל, y של מרכז המעגל, והרדיוס של המעגל.
קואורדינאטות של מרובע יהיו left, top, right, bottom.
קואורדינטות של מצולע יהיו x ו y של כל קודקוד במצולע.
רשומות
אין תגובות:
הוסף רשומת תגובה
שים לב: רק חברים בבלוג הזה יכולים לפרסם תגובה.