מה צריך לדעת
• השתמש בתמונה בגודל רגיל שהדפדפן לא ישנה את קנה המידה. תצטרך גם עורך תמונות ועורך HTML או טקסט.
• בעת הוספת התמונה, הוסף תכונה נוספת כדי לזהות את הקואורדינטות של המפה.
• לדוגמה:
מאמר זה מסביר כיצד ליצור מפות תמונה באמצעות תגיות HTML במקום עורך מפות תמונה. רוב עורכי התמונות יציגו לך את הקואורדינטות של העכבר שלך כאשר תצביע על התמונה, שהם כל הנתונים שאתה צריך כדי להתחיל עם מפות תמונה.
יצירת מפת תמונה
כדי ליצור מפת תמונה, תחילה בחר תמונה שתשמש כבסיס למפה. התמונה צריכה להיות "בגודל רגיל" - כלומר, אסור להשתמש בתמונה כל כך גדולה עד שהדפדפן יתאים אותה.
כאשר תכניס את התמונה, תוסיף תכונה נוספת המזהה את הקואורדינטות של המפה:
כאשר אתה יוצר מפת תמונה, אתה יוצר אזור שניתן ללחוץ על התמונה, ולכן הקואורדינטות של המפה חייבות להתאים לגובה ולרוחב של התמונה שבחרת. מפות תומכות בשלושה סוגים שונים של צורות:
- רect-a מלבן או דמות ארבע צדדית
- poly-a מצולע או דמות רב-צדדית
- מעגל-מעגל
כדי ליצור את האזורים, עליך לבודד את הקואורדינטות הספציפיות שאתה מתכוון למפות. מפה עשויה להיות מורכבת מאזור מוגדר אחד או יותר בתמונה, שכאשר לוחצים עליו, פותחים היפר-קישור חדש.
עבור מלבן, אתה ממפה רק את הפינה השמאלית העליונה והימנית התחתונה. כל הקואורדינטות מופיעות בתור x, y (מעל, למעלה). לכן, עבור הפינה השמאלית העליונה 0, 0 והפינה הימנית התחתונה 10, 15 תקליד 0, 0, 10, 15. לאחר מכן תכלול אותו במפה:
עבור מצולע, אתה ממפה כל קואורדינטת x, y בנפרד. דפדפן האינטרנט מחבר אוטומטית את קבוצת הקואורדינטות האחרונה עם הראשונה; כל דבר בתוך הקואורדינטות האלה הוא חלק מהמפה.
צורות מעגל דורשות רק שתי קואורדינטות, כמו המלבן, אבל עבור הקואורדינטה השנייה, אתה מציין את הרדיוס או המרחק ממרכז המעגל. לכן, עבור מעגל שהמרכז שלו הוא 122, 122 ורדיוס של 5 היית כותב 122, 122, 5:
כל האזורים והצורות עשויים להיכלל באותה תג מפה:
שיקולים
מפות תמונה היו נפוצות הרבה יותר בעידן ה-Web 1.0 של שנות ה-90 ועד לתחילת שנות ה-2000- מפות תמונות היוו לעתים קרובות את הבסיס לניווט באתר. מעצב היה יוצר איזושהי תמונה כדי לציין פריטי תפריט, ואז מגדיר מפה.
גישות מודרניות מעודדות עיצוב רספונסיבי ומשתמשות בגיליונות סגנונות מדורגים כדי לשלוט במיקום של תמונות והיפר-קישורים בדף.
למרות שתג המפה עדיין נתמך בתקן HTML, השימוש במכשירים ניידים עם גורמי צורה קטנים עלול להוביל לבעיות ביצועים בלתי צפויות עם מפות תמונה. בנוסף, בעיות ברוחב פס או תמונות שבורות מעידות על הערך של מפת תמונה.
לכן, אל תהסס להמשיך להשתמש בטכנולוגיה היציבה והמובנת הזו, מתוך ידיעה שישנן חלופות יעילות יותר כיום באופנה עם מעצבי אינטרנט.
