‫Htm - אחלה טיפים לבניית אתרים » פילטרים‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫שקיפות PNG עבור Internet Explorer 6‬ http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/ http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/#comments Thu, 05 Feb 2009 13:49:08 +0000 ‫אורן רוט‬ http://htm.co.il/?p=34
הרצון: שימוש בתמונות בעלות שקיפות (PNG) באינטרנט.
הבעיה: אינטרנט אקספלורר 6.
הפיתרון: שימוש בפילטרים.

בדומה לפורמטי התמונות JPEG ו-GIF, גם קבצי PNG הם קבצים שימושיים בבנייה ובעיצוב אתרים באינטרנט.
היתרון המרכזי של פורמט ה-PNG על שאר הפורמטים היא האפשרות לתמיכה בשקיפות (Opacity), דבר חשוב מאוד כאשר מעוניינים ליצור עיצוב מעניין שמשלב שימוש במספר שכבות.
רובכם ודאי יודעים כי גם הפורמט GIF תומך בשקיפות, אך יש הבדל גדול בין הפורמטים. בעוד GIF תומך בשקיפות (opacity), פורמט PNG תומך ב"שקיפות אלפא" (alpha transparency).

מה זה "שקיפות אלפא"?

קבצי GIF מסוגלים לבחור אם להציג פיקסל מסוים שקוף או אטום לחלוטין, בעזרת טכניקה המכונה בשפה המקצועית שקיפות בינארית (binary transparency). לעומתם, קבצי PNG מסוגלים לטפל בשקיפות חלקית שברמתה ניתן לשלוט לפי פרמטר (בין 0 ל255).

תמונה להמחשת שקיפות למחצה בPNG

תמונה להמחשת שקיפות משתנה בPNG

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

מעצבי אתרים רבים המעוניינים לבנות אתר מקצועי ירצו להתאים את עיצוב האתר לכל הדפדפנים. אם תשאלו אותם לאיזה דפדפן הכי קשה/מעצבן/מעייף להתאים את הקוד (עיצוב) רוב הפעמים זה יהיה IE6.

ובכן גם כאן, הבעיה שקיימת בשימוש בקבצי PNG היא ש-IE6 פשוט לא תומך בשקיפות שלהם.
בעוד ששאר הדפדפנים כמו safari,firefox,IE7 תומכים בשקיפות של קבצי PNG, כאשר מנסים להציג קובץ חצי שקוף בפורמט PNG בIE6 אנו נתקלים בבעיה (בד"כ מעין רקע אפור) ואנחנו צריכים לעבוד קצת יותר קשה כדיי למצוא פתרון.

הפתרון של ביל גייטס

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

אחד מהפילטרים שמוצעים ע"י מייקרוסופט הוא ה-"AlphaImageLoad" שבעזרתו אפשרי להציג קבצי PNG עם שקיפות חלקית גם בIE6.

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

כיצד לכלול שקיפות PNG ב IE6

השיטה המעודפת עליי היא השיטה של האתר http://homepage.ntlworld.com/bobosola והיא הוספה של קובץJS (JavaScrip) שמרנדר את כל קבצי הPNG שנמצאים בעמוד האינטרנט לפני טעינת העמוד, אוטומטית. על מנת להפעיל את הקוד באתרכם עבדו לפי השלבים הבאים:

  1. הורידו את קובץ ה- pngfix.js דרך האתר של bobosola.
  2. העלו את הקובץ לאתרכם לתיקייה הרצויה.
  3. בקובץ האתר טענו את קובץ הJS באמצעות הוספת הקוד הבא בתוך תגית <head>:
1
2
3
<!--[if lt IE 7.]>
 <script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
  1. זה הכל. בעצם כמעט הכל.

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

טיפ אישי

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

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

על-מנת לבצע את השינוי בקוד:

1. פתחו את קובץ pngfix.js באמצעות עורך טקסט פשוט.

2. הוסיפו לתנאי-

1
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

את הבדיקה:

1
&& img.className=="trans"

כלומר:

1
if (imgName.substring(imgName.length-3, imgName.length) == "PNG" && img.className=="trans")

3. כעת הוסיפו את האלמנט "class="trans לכל התמונות שאתם מעוניינים בשקיפותן.

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

אז פעם הבאה שאתם משתמשים ב-PNG אל תשכחו לדאוג גם להוסיף את הפילטר.

עוד באותו נושא:

]]> http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/feed/ 2