באפשרותך ליצור אפקט צילום בערכת הנושא שלך ב- Tumblr המציג תמונה בבירור כאשר העכבר מרחף מעל התמונה, אך כאשר העכבר אינו מרחף מעל התמונה, התמונה נראית מטושטשת. ראשית, הכינו את התמונות בהן תשתמשו לאפקט. ואז הכנס שני קטעי קוד לנושא Tumblr שלך. שים לב שהקוד אינו נתמך בפוסטים של Tumblr, רק בנושאי הבלוג.
הכן תמונות
כדי לבצע את משימת התמונה המטושטשת, תזדקק לשתי תמונות כמעט זהות: עותק אחד של התמונה הברורה המקורית והעתק שני של אותה תמונה, מטושטש בלבד. השתמש באפקט הטשטוש ב- GIMP או בפוטושופ כדי ליצור את המראה המטושטש של התמונה השנייה. וודאו שהתמונות באותן מידות בדיוק.
קוד JavaScript
קטע קוד JavaScript מוכנס בין ה-
ו תגיות של בלוג ה- Tumblr שלך. קוד ה- JavaScript כולל את אירועי MouseRollover ו- MouseOut. אירוע ה- MouseRollover מורה לתמונה הברורה להציג כאשר העכבר מרחף מעל התמונה. האירוע של MouseOut מגדיר איזו תמונה להציג כאשר העכבר לא מרחף מעל התמונה.קטע קוד ה- JavaScript לשימוש להשפעה זו הוא:
שנה את התייחסות "Picture1.jpg" לכתובת האתר עבור התמונה המקורית הברורה. שנה את הפניה "Picture2.jpg" לכתובת האתר של התמונה המטושטשת.
קוד HTML
קוד ה- HTML המלווה את קטע ה- Javascript מגדיר את הגודל, המיקום והפריסה של התמונה. הכנס את קוד ה- HTML לנושא Tumblr שבו תרצה שתצוגת התמונות תופיע. קוד ה- HTML שמלווה את קטע ה- Javascript לעיל הוא:
החלף את "Picture2.jpg" בכתובת האתר לתמונה המטושטשת, שתוצג כברירת מחדל. שנה את המשתנים "רוחב" ו"גובה "לגודל הרצוי של התמונה המוצגת שלך.
התקן קוד
כדי להתקין את הקוד בעיצוב Tumblr שלך, פתח את לוח המחוונים של Tumblr שלך ואז לחץ על הכרטיסייה "התאמה אישית" בלוח המחוונים לשינוי הבלוג. לחץ על האפשרות "ערוך HTML" כדי לפתוח את עורך העיצוב. בחר את קטע הקוד של Javascript כדי להדגיש את הקוד, ואז לחץ על "Ctrl-C" כדי להעתיק את הקוד. לחץ על הרווח מול "תייג את קוד העיצוב שלך, ואז לחץ על "Ctrl-V" כדי להדביק את הקוד.
העתק את קוד ה- HTML ואז חזור לעורך העיצוב של Tumblr. מצא את המיקום בקוד שבו ברצונך שאפקט הצילום יופיע. לחץ במיקום ולאחר מכן לחץ על "Ctrl-V" כדי להדביק את קטע ה- HTML. לחץ על "עדכן תצוגה מקדימה" כדי לבדוק את האפקט בחלון התצוגה המקדימה. לחץ על "שמור" כדי לשמור את השינויים.
