איך ליצור Image Map בעזרת Gimp

 

האם רציתם להוסיף מפת תמונה, Image Map, לאתר האינטרנט שלכם? image map זוהי תמונה אחת שמכילה בתוכה נקודות מסוימות שמקשרות ללינקים שונים. היכולת הזאת מאפשרת לבונה ומעצב אתרים גמישות רבה יותר בעיצוב אתר, כיוון שהיא מאפשרת לו להכניס קישורים שונים כמעט בכל מקום שהם רוצים. כן, ממש בכל מקום על התמונה וכמה קישורים שרק תרצו.

ישנם מספר תוכנות עיצוב שיכולות לעזור למעצב ובונה אתרים ליצור image map, אך רוב התוכנות האלה מאד יקרות. בכתבה זו אני אלמד אתכם איך אפשר לעשות את זה בקלות ובחינם בעזרת Gimp. עקבו אחרי הצעדים הבאים כדי ליצור image map משלכם בעזרת Gimp.

אז מה זה בכלל image map?

על מנת להמחיש בקלות מה הכוונה, הלכתי ויצרתי תמונה. כיוון שתמונה שווה אלף מילים, הנה התמונה:

 

 

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

 

 

רחפו מעל הסמל של Gmail והעיפו מבט לשורת הסטאטוס של הדפדפן שלכם – הקישור לכתבה של gmail יופיע. עכשיו רחפו מעל אחד הסמלים האחרים ושימו לב איך הלינק משתנה !

 

 

 

רחפו מעל אחד הסמלים האחרים, וקישור אחר (בהתאם לסמל שתרחפו מעליו) יופיע. מגניב? בואו נלמד איך עושים את זה בקלות בעזרת Gimp.

 

צרו או מצאו תמונה שאתם רוצים להשתמש בה

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

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

 

פתחו את עורך ה image map ב Gimp והתחילו למפות

לצורך הדוגמא אני אראה לכם איך יצרתי image map מהתמונה שמופיעה למעלה. אני טוען את התמונה ב Gimp, לאחר מכן לוחץ על Filters –>Web –>Image Map:

 

התמונה תפתח לי בחלון נוסף שנקרא Image Map:

 

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

 

 

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

 

 

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

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

 

 

העתיקו את הקוד

המשיכו ליצור את צורות שונות, לכל צורה הכניסו את הקישור הרלוונטי. אני אישית לא ממלא יותר משני השדות הבסיסיים של קישור ו Alt Text. אם אני צריך ג'אווה-סקריפט אני פשוט יכניס אותו מאוחר יותר בקוד עצמו. לאחר שסיימת למפות ולקשר את החלקים השונים בתמונה שלכם, אנחנו צריכים להשיג את קוד ה Html שיידע להציג את הקישורים השונים בתמונה.

ה image map שיצרתם כתובים למעשה בשפת HTML, ועל מנת שנוכל להציג את זה כראוי  אנו צריכים להשיג את את הקוד ש Gimp יצר עבורנו בתמונה שעבדנו עליה ולהטמיע את זה באתר או בקובץ Html. זה מאד מאד פשוט, פשוט לחצו על  View–>Source על מנת לקבל את קוד המקור.

 

 

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

 

בדקו את התמונה

על מנת שנוכל לבחון את התוצאה לפני שאנחנו מטמיעים את זה באיזשהו אתר, כשאתם עוד בחלון של ה image map תוכלו לשמור את הקובץ, לכו ל file->Save. בדיאלוג שייפתח, שימו לב שהוא מבקש לשמור קובץ עם הסיומת Map. הקובץ שייווצר יכיל בתוכו אך ורק את הקוד שראינו קודם, לכן כדי לשנות את הסיומת הסתמית של Map לסיומת יותר שימושית, כמו Html. נווטו בדיאלוג שמירת הקובץ לאותה התיקייה המקומית בה התמונה שלכם נמצאת, שנו את הסיומת מ map ל html ואם תרצו תוכלו לתת איזה שם שתרצו לקובץ עצמו, רק שמרו על הסיומת, ולחצו OK.

 

 

כעת יווצר קובץ html בתיקיית התמונה ובתוכו הקוד הממפה את הקישורים באזורים שונים בתמונה. מכיוון שמדובר על אותה התיקייה, הערך img src יהיה נכון – פשוט שם הקובץ של התמונה (לא לשכוח לשנות את הנתיב הזה במידה ונתיב התמונה ישתנה, דבר שיקרה אם תעלו את התמונה לאתר למשל). גשו לתיקייה המקומית של התמונה ולחצו לחיצה כפולה על קובץ ה html שיצרתם. דפדפן ברירת המחדל שלכם צריך לפתוח דף המציג את התמונה שלכם:

 

 

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

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

 

להורדת Gimp

---

דרג את הכתבה
(1 הצביע, ממוצע : 3.00 מתוך 5)
 Loading ...

ניסיתם את Gimp? מכירים פתרונות אחרים ליצירת Image Map ? שתפו אותנו !

קרא עוד:

1. צרו אנימציות בקבצי Gif בעזרת GIMP
2. הורידו קבצים וטורנטים מהר יותר בעזרת Fetch.io
3. שיתוף קבצים מיידי ללא הגבלת נפח בעזרת הדפדפן בלבד
4. הקלטת שיחות וידאו ב Skype בחינם בעזרת Vodburner
5. יצירת שטח מוצפן ופרטי בדיסק-הקשיח בעזרת Truecrypt 7

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

הגב באמצעות פייסבוק