היתרונות והחסרונות בשימוש במפות תמונות
היתה נקודה בהיסטוריה של עיצוב אתרים שבו אתרים רבים השתמשו תכונה המכונה "מפות תמונה". זוהי רשימה של קואורדינטות המצורפות לתמונה מסוימת בדף. קואורדינטות אלה יוצרות אזורי היפר על התמונה, הוספת "נקודות חמות" חיוניות לגרפיקה, שכל אחת מהן ניתנת לקידוד כדי לקשר למקומות שונים. זה שונה בהרבה מאשר רק הוספת תג קישור לתמונה, אשר יגרום כל הגרפיקה להיות קישור אחד גדול ליעד אחד.
דוגמאות - דמיינו שיש קובץ גרפי עם תמונה של ארצות הברית. אם רצית שכל מדינה תהיה "ניתנת ללחיצה", כך שהם יגיעו לדפים על מצב ספציפי זה, תוכל לעשות זאת עם מפת תמונה. באופן דומה, אם היתה לך תמונה של להקת מוסיקה, תוכל להשתמש במפת תמונה כדי שכל אחד מהחברים יהיה ניתן ללחיצה לדף הבא על חבר הלהקה.
האם מפות התמונות יעילות? הם בהחלט היו, אבל הם נפלו מן העדפה על האינטרנט של היום. זה, לפחות בחלקו, כי מפות תמונה דורשים קואורדינטות ספציפיות לעבוד. האתרים כיום בנויים כך שיהיו בעלי יכולת תגובה ותמונות בקנה מידה בהתאם לגודל של מסך או התקן. משמעות הדבר היא שנקבע מראש קואורדינטות, כך מפות עבודה תמונות, להתפרק כאשר קשקשים האתר ואת התמונות לשנות את גודל. זו הסיבה מפות תמונה משמשים לעתים רחוקות על אתרי הפקות היום, אבל הם עדיין יש יתרונות הדגמות או מקרים שבהם אתה מאלץ את הגודל של דף.
רוצה לדעת כיצד ליצור מפת תמונות, במיוחד כיצד לעשות זאת עם Dreamweaver? . התהליך הוא לא קשה במיוחד, אבל זה לא קל או, אז אתה צריך קצת ניסיון לפני שתתחיל.
מתחילים
בואו נתחיל. הצעד הראשון שאתה צריך לקחת הוא להוסיף תמונה לדף האינטרנט שלך. לאחר מכן תלחץ על התמונה כדי להדגיש אותה. משם, אתה צריך ללכת לתפריט המאפיינים (ולחץ על אחד משלושת כלי ציור חמה: מלבן, מעגל או מצולע.אל תשכחו לתת שם התמונה שלך, אשר אתה יכול לעשות בסרגל הנכס.אתה יכול שם זה משהו שאתה רוצה.השתמש "מפה" כדוגמה.
עכשיו, לצייר את הצורה הרצויה על התמונה שלך באמצעות אחד הכלים האלה. אם אתה צריך כתמים מלבניים, השתמש rectange. אותו דבר לגבי המעגל. אם אתה רוצה צורות חמות מורכבות יותר, השתמש בפוליגון. זה מה שאתה עשוי להשתמש בדוגמה של המפה של ארה"ב, מאז המצולע יאפשר לך ירידה נקודות וליצור צורות מורכבות מאוד לא סדיר על התמונה
בחלון המאפיינים עבור הנקודה החמה, הקלד או דפדף אל הדף שאליו יש לחבר את הנקודה החמה. זה מה ליצור אזור linkable. המשך להוסיף נקודות חמות עד שהמפה שלך תושלם וכל הקישורים שברצונך להוסיף נוספו.
לאחר שתסיים, עיין במפת התמונה שלך בדפדפן כדי לוודא שהיא פועלת כראוי. לחץ על כל קישור כדי לוודא שהוא עובר אל המשאב הנכון או לדף האינטרנט.
חסרונות של מפות תמונה
שוב, להיות מודעים לכך מפות התמונה יש כמה חסרונות, אפילו מחוץ היעדר האמור לעיל תמיכה עם אתרי אינטרנט תגובה. אשוח, פרטים קטנים עשויים להיות מוסתר במפת תמונה. לדוגמה, מפות תמונה גיאוגרפיות יכולות לעזור לקבוע איזו יבשת משתמש, אך ייתכן שמפות אלו לא יפורטו מספיק כדי לאתר את ארץ המוצא של המשתמש. פירוש הדבר שמפת תמונה עשויה לעזור לקבוע אם משתמש הוא מאסיה, אך לא מקמבודיה בפרט.
ייתכן שגם מפות תמונה נטענות באיטיות. הם לא צריכים לשמש מספר פעמים באתר אינטרנט כי הם תופסים מקום רב מדי לשימוש בכל דף של אתר אינטרנט. יותר מדי מפות תמונה בדף יחיד ייווצר צוואר בקבוק רציני והשפעה מסיבית על ביצועי האתר .
לבסוף, ייתכן שמפות תמונות לא יהיו קלות למשתמשים בעלי בעיות חזותיות לגשת אליהם. אם השתמשת במפות תמונות, עליך גם ליצור מערכת ניווט נוספת עבור משתמשים אלה כחלופה.
שורה תחתונה
אני משתמש במפות תמונה מעת לעת, כאשר אני מנסה להרכיב הדגמה מהירה של עיצוב ואיך זה עובד. לדוגמה, ייתכן שאני מלגלג על עיצוב עבור אפליקציה לנייד וברצוני להשתמש במפות תמונות ליצירת נקודות חמות כדי לדמות את האינטראקטיביות של האפליקציה. זה הרבה יותר קל לעשות מאשר לקודד את האפליקציה, או אפילו לבנות דפי אינטרנט דמה בנוי לסטנדרטים הנוכחיים עם HTML ו- CSS. בדוגמה הספציפית הזו, ובגלל שאני יודע איזה מכשיר אני אציג את העיצוב ויכול לשנות את הקוד למכשיר זה, מפת תמונה עובדת, אבל לשים אותם באתר הפקה או באפליקציה הוא מסובך מאוד וצריך להימנע מכך. אתרי אינטרנט.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב- 9/7/17.