כיצד לבנות מפת תמונות עם CSS

אפשרויות

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

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

  1. בנה את התמונה שבה תרצה להשתמש. אתה יכול להשתמש בגרפיקה זו למטה (לחץ באמצעות לחצן העכבר הימני ושמור בהורדה):
    אפשרויות
  2. העלה את התמונה שלך לספרייה ביחס ל- CSS שלך. בוורדפרס ניתן לעשות זאת בצורה הקלה ביותר על ידי הצבתו בתיקיית תמונות בספריית העיצוב שלך.
  3. הוסף את ה- HTML שלך. זה נחמד ופשוט ... מחלקה עם שלושה קישורים:
    > div id = "subscribe">> a id = "rss" href = "[קישור הפיד שלך]" title = "הירשם באמצעות RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[קישור המנוי שלך לדוא"ל]" title = "הירשם באמצעות דוא"ל" >> span class = "hide"> דוא"ל> / span >> / a>> id = "mobile" href = "[קישור הנייד שלך]" title = "צפה בגרסה לנייד" >> span class = "hide"> נייד> / span >> / a>> / div>
    
  4. ערוך את גיליון הסגנון המדורג שלך. תוסיף 6 סגנונות שונים. סגנון אחד לחלוקה הכוללת, 1 לתג כך שלא יציג קישוט טקסט כלשהו, ​​סגנון אחד להסתרת הטקסט (משמש לנגישות) ומפרט סגנון אחד לכל אחד מהקישורים:
    #subscribe {/ * בלוק תמונת רקע * / display: block; רוחב: 215 פיקסלים; גובה: 60 פיקסלים; רקע: url (images / options.png) ללא חזרה; שוליים למעלה: 0 פיקסלים; } # מנוי {טקסט-קישוט: אין; } .הסתיר {נראות: מוסתר; } #rss {/ * קישור RSS * / float: שמאל; עמדה: מוחלט; רוחב: 50 פיקסלים; גובה: 50 פיקסלים; שוליים-שמאל: 20 פיקסלים; שוליים למעלה: 5 פיקסלים; } #email {/ * קישור דוא"ל * / float: left; עמדה: מוחלט; רוחב: 50 פיקסלים; גובה: 50 פיקסלים; שוליים-שמאל: 70 פיקסלים; שוליים למעלה: 5 פיקסלים; } #mobile {/ * קישור נייד * / צף: שמאל; עמדה: מוחלט; רוחב: 50 פיקסלים; גובה: 50 פיקסלים; שוליים-שמאל: 130 פיקסלים; שוליים למעלה: 5 פיקסלים; }

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

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

עודכן 10/3/2007 לנגישות טובה יותר בעצת פיל!

נותן חסות: אם אתה מתחיל בעיצוב אתרים, אז בנה אתר משלך בדרך הנכונה באמצעות HTML & CSS, המהדורה השנייה היא חובה. במדריך קל לעקוב זה תלמד כיצד לבנות אתר אינטרנט בצורה הטובה ביותר - על ידי ביצוע זה בעצמך!

תגובות 41

  1. 1

    דאג, זה נראה כמו שיטה נחמדה, אבל זה מאוד לא נגיש.

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

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

    • 2
      • 3

        דאג,

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

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

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

        אז כן, קישורים עם כותרות טובים יותר מאלה שבליהם, אבל במקרה זה זה רק שולי.

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

        • 4

          מידע טוב, פיל. אני אנסה לשפר את זה בטקסט אבל פשוט להסתיר את הטקסט - ככה מוצר נגיש כמו JAWS יקרא את טקסט הקישור והטקסט יוצג אם CSS או תמונות מושבתים.

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

  2. 5
  3. 8

    גנבתי את זה. שם, אמרתי את זה.

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

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

    אני אולי אצטרך עדיין לקנות לך את הקפה הזה!

  4. 10

    דאג,

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

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

  5. 12
    • 13

      ויליאם,

      נראה שיש לך התנגשות בין שמות כיתות ההערות שלך לבין שמות הכיתות בתרשים בסרגל הצד. אתה יכול לתת להם שם שונה כדי לנקות את הסכסוך. תודיע לי אם אתה צריך יד!

      דאג

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

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

  11. 19

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

  12. 20
  13. 21

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

    http://www.phaylen.com/blog/

    עכשיו תראה שיש לנו דגל ניווט בחלקו העליון, תמונה שהתכוונו למפות כפי שעשינו בעבר עשרות פעמים. / palmforehad. אף אחד מאיתנו לא ממש מבין את CSS, אבל אנחנו מעדים מספיק ובינתיים הסתדרנו עד לנקודה זו. המאמר שלך ב- ONE בלבד מתוך עשרות שסיפקו הוא תובנה אמיתית כיצד להשתמש במיפוי תמונות ב- CSS בקלות. ערכתי את גיליון הסגנונות בהתאם להוראות שלך, אך אין לי מושג היכן למקם את ה- HTML. כל מה שאמרת זה "הוסף את ה- HTML שלך ... זה נחמד ופשוט" ואז התכווצתי כי חשבתי .. "לא מספיק פשוט בשבילי!" לא ידעתי שאוכל להוסיף HTML לאף אחד מדפי ה- php האלה בעורך העיצוב. האם אני מציב את ה- HTML בכותרת? תבנית האינדקס הראשי? הפונקציות? אני מניח שלכל משתמשי wordpress יש אפשרות לערוך את ערכת הנושא שלהם בעורך לוח המחוונים, שנראה די אוניברסלי בפונקציונליות. אם אתה יכול להציע היכן למקם את ה- HTML, אשמח להתאים את קוד ה- oru לסרגל הניווט שלי.

    תודה ששיתפת את הידע שלך עם הקהילה. אני שמח להביא לך קפה.

    • 22

      היי פיי!

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

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

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

      מקווה שזה עוזר!

    • 23

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

  14. 24

    תודה על התגובה המהירה!

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

    עבדתי בלוח המחוונים כל הבוקר, לצערי, אני לא בטוח באיזה קובץ אני מציב את ה- html, כאמור לעיל, יש לי כמה, header.php, index.php הראשי, functions.php, footer.php. אני לא בטוח היכן להכניס את קוד ה- HTML. (החלק הראשון שסיפקתם, כבר הכנסתי את השאר לגיליון הסגנונות שלי) יש לי את התמונה שלי שם באתר, הכל מוכן ללכת, אני רק צריך לדעת לאן להוסיף את החלק html של הקוד להתאמה.

    תודה רבה על זמנך ושאלות השדה מטירון.

    פיי

  15. 25

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

    פיילן

  16. 26
  17. 27

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

    עזרה.

    נראה שפלאש הוא האופציה היחידה שלי?

    • 28

      דייב,

      אם תכניס את התמונה לתבנית שלך, יהיה לך בסדר. אם תשים את מפת התמונות בתוכן בפועל, אתה עלול להיתקל בבעיות סינון. הדרך שבה עבדתי סביב זה נוראית, אבל לפעמים השתמשתי ב- iframe.

      דאג

  18. 29

    היי,

    נראה שמפת התמונות והקישורים הם שני דברים שונים, הם לא עובדים יחד כמו איך מפת תמונות ב- html עושה

    כאשר אני כולל מיקום רקע (במרכז שמאל) עבור מפת התמונות, מיקום הקישורים אינו עוקב אחריו.

    איזו דרך לעקוף את זה? אני מאוד חובבן. תודה.

  19. 31

    האם גישה דומה תשתמש במפת תמונות גדולה ומסובכת יותר כמו שאני מנסה להשתמש בה?

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

    ביסודו של דבר, מנסה להשתמש בתמונה כדי לעבור לכל חלק ברשימה זו באותיות.

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

    אם כי, עשוי לשקול להשתמש בפלאש

    תודה.

  20. 33

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

  21. 34

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

  22. 35

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

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

    במקום זאת, השתמש בטכניקה חזקה יותר להחלפת תמונות. אני מציע או בשיטת Phark או Gilder / Levin - אלה רק השמות המתועדים יותר כדי לחפש בגוגל כדי למצוא את הטכניקות הבסיסיות. אני מעדיף G / L מכיוון שזה עובד גם עם CSS מופעל אך תמונות כבויות.

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

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

    3. לסיום, מדוע לא להשתמש ברשימה לא מסודרת בצורה סמנטית עבור קישורים אלה במקום ה- div חסר המשמעות?

    סליחה על שיבוט על ... אני פשוט רוצה לשתף, b / c אני יודע מניסיון כיצד ישנן דרכים רבות ושונות להשתמש ב- CSS כדי להשיג תוצאה רצויה, אך דרכים מסוימות בהחלט עובדות טוב יותר (אמין יותר, בין דפדפנים) יותר מאחרות. . HTH.

  23. 36
  24. 37
  25. 38

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

  26. 39

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

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.