החלפת תמונה דינמית טכניקות וכלים מעשיים

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

בשנת 2005, דינמי החלפת התמונה נעשה פופולרי עם טכניקה הנקראת מדרגית Inman פלאש החלפת (sIFR). פותח על ידי שון אינמן, sIFR לנצל את Javascript ו- Adobe Flash כדי לאפשר למעצבי אינטרנט להשתמש בכל גופנים מותאמים אישית שהם אוהבים באתר האינטרנט ועדיין לשמור על הנראות לאלה שאין להם את הגופן. וכפי האינטרנט ממשיך להתפתח, היום יש לנו פתרונות חלופיים יותר באמצעות טכנולוגיות שונות, רק במקרה שאתה לא ממש אוהד של Flash.

ללא ado נוספת, בואו נסתכל על חלק טכניקות כדי להשיג דינמי החלפת תמונות.

טכניקות בשימוש נפוץ

הנה כמה מן הטכניקות הנפוצות ביותר עבור תחליפים תמונה דינמית.

מדרגית Inman פלאש החלפת (sIFR)

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

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

כלים עבור SIFR שעשויים להיות שימושיים:

• sIFRvaultsIFRvault הוא מאגר של גופני sIFR אתה יכול להוריד.
• מחולל SIFRכלי מקוון המאפשר לך ליצור קבצי SIFR. SWF עם כמה לחיצות על העכבר. פשוט להעלות את גופן TTF של הגופן שברצונך להמיר, תצוגה מקדימה ולהוריד.
• המרת גופנים ל SIFRטען גופן .TTF ואתר זה יהיה להם להמיר את הקובץ sIFR Flash.

SIFR לייט

SIFR המקורי הוא 22k, כך דייב החליט לעבד אותו מחדש באמצעות גישה יותר מונחה עצמים, והתוצאה? 3x קטן יותר ב 3.7k.

PHP + CSS דינמי החלפת טקסט (P + C DTR)

כפי שהשם מרמז, זוהי שיטת החלפת טקסט המשתמשת ב- PHP ו- CSS העושים שימוש בשיטה המקורית שתוארה על ידי סטוארד רוזנברגר. זה גם שיפור מן הגרסה הקודמת שפותחה על ידי ר 'מארי קוקס שאינו תומך גלישת טקסט ותגים פנימיים. עוד דבר מגניב על P + C DTR הוא, טקסט התמונה ניתן להתאמה אישית עם תגי CSS.

typeface.js

מה שעושה typeface.js מיוחד כי הם משתמשים רק Javascript להטביע גופנים מותאמים אישית בסגנון יכול להיות מותאם אישית נוספת עם HTML ו- CSS, פלאש לא נדרש. זה קוד פתוח תומך ברוב הדפדפנים אנו משתמשים בימים אלה, בין אם זה Safari, Firefox, IE (6 ומעלה).

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

גופנים מותאמים אישית ב- typeface.js אינם מלוקטים; כלומר משתמשים יכולים להוריד את הגופנים. זה יכול להוביל לבעיה של זכויות יוצרים. מומלץ שתבדוק ביסודיות כדי לוודא שהגופנים שבהם אתה משתמש מאושרים לחלוקה מחדש.

קופון

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

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

מתיחת פנים

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

Facelift משתמש ב- PHP ו- PHP GD Library. הם יורשים את בעיית המורשת של החלפת גופנים מותאמים אישית - לא ניתן לבחור את הטקסט. חוץ מזה, אנחנו חושבים שזה נהדר.

שיטות נוספות

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

סוג בחר

הקלדבחר מנוף על typeface.js, jQuery, בד, toDataURL, CSS תכונות רקע טקסט אמיתי overlayed לתת גופן מותאם אישית באתר האינטרנט שלך. בחירת טקסט פועלת ב- Firefox, Safari ואפילו ב- Chrome, אך לא ב- IE.

החלפת תמונות SWF (swfir)

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

תשע טכניקות עבור החלפת תמונה CSS

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

גופן מבער

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

וורדפרס + דינמי החלפת תמונה

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

SIFR וורדפרס Plugin - WP sIFRWP SIFR נוצר כדי להסיר את הסיבוכים מ מקבל גופנים מותאמים אישית באתר וורדפרס. עם WP sIFR, אתה רק צריך להעלות את קובץ הגופן SWF שלך לתיקיה plugin ולאחר מכן להתחבר, להפעיל אותו, ולהגדיר את סגנונות כל בחלונית 'הגדרות'.

תוסף WordPress קופון - WP-CUPONהדבר היחיד שאתה צריך לעשות הוא המרת fontfiles שלך ולהעלות אותם לתוך ספריית plugins. באפשרותך להפעיל את האובייקטים שברצונך לקבל את מקומם בתפריט הניהול של WordPress.

תמונה Replacment (FLIR)פליר עבור וורדפרס הוא ידידותי SEO רק מעבד את התמונה בדפדפן אם JavaScript מאופשר. אתה HTML / XHTML קוד נשאר ללא שינוי עוזב את התגים הראש קריא על ידי מנועי החיפוש ואת הדף קריא על ידי אלה ללא JavaScript.

לוח בקרה על גופןה גופן מבער תוסף לוח הבקרה מאפשר לך להוסיף בקלות כל 1000 גופנים חינם זמין על האתר מבער גופן לנושא WordPress שלך.