يمكنك إنشاء تأثير صورة في نسق Tumblr الخاص بك والذي يعرض صورة بوضوح عندما يحوم الماوس فوق الصورة ، ولكن عندما لا يحوم الماوس فوق الصورة ، تظهر الصورة غير واضحة. أولاً ، قم بإعداد الصور التي ستستخدمها للتأثير. ثم أدخل مقتطفين من التعليمات البرمجية في قالب Tumblr الخاص بك. لاحظ أن الكود غير مدعوم في منشورات Tumblr ، فقط في سمات المدونة.
تحضير الصور
لإنجاز مهمة الصورة غير الواضحة ، ستحتاج إلى صورتين متطابقتين تقريبًا: نسخة واحدة من الصورة الأصلية الواضحة ونسخة ثانية من نفس الصورة ، غير واضحة فقط. استخدم تأثير Blur في GIMP أو Photoshop لإنشاء مظهر ضبابي للصورة الثانية. تأكد من أن الصور هي نفس الأبعاد بالضبط.
كود جافا سكريبت
يتم إدراج مقتطف من كود JavaScript بين ملف
و علامات مدونتك على Tumblr. تتضمن شفرة JavaScript أحداث MouseRollover و MouseOut. يرشد حدث MouseRollover الصورة الواضحة إلى العرض عندما يحوم الماوس فوق الصورة. يحدد حدث MouseOut الصورة التي سيتم عرضها عندما لا يحوم الماوس فوق الصورة.مقتطف شفرة JavaScript المراد استخدامه لهذا التأثير هو:
قم بتغيير مرجع “Picture1.jpg” إلى عنوان URL للصورة الأصلية الواضحة. قم بتغيير مرجع “Picture2.jpg” إلى عنوان URL للصورة المموهة.
كود HTML
تحدد شفرة HTML المصاحبة لمقتطف جافا سكريبت حجم الصورة وموقعها وتخطيطها. أدخل كود HTML في نسق Tumblr حيث تريد ظهور عرض الصورة. كود HTML المصاحب لمقتطف جافا سكريبت أعلاه هو:
استبدل “Picture2.jpg” بعنوان URL للصورة غير الواضحة ، والتي سيتم عرضها افتراضيًا. قم بتغيير متغيري "العرض" و "الارتفاع" إلى الحجم المطلوب للصورة المعروضة.
تثبيت الكود
لتثبيت الشفرة في قالب Tumblr الخاص بك ، افتح لوحة معلومات Tumblr ، ثم انقر فوق علامة التبويب "تخصيص" في لوحة القيادة لتعديل المدونة. انقر فوق خيار "تحرير HTML" لفتح محرر السمات. حدد مقتطف شفرة جافا سكريبت لتمييز الشفرة ، ثم اضغط على "Ctrl-C" لنسخ الرمز. انقر فوق المساحة الموجودة أمام ""في رمز المظهر ، ثم اضغط على" Ctrl-V "للصق الرمز.
انسخ كود HTML ، ثم ارجع إلى محرر سمة Tumblr. ابحث عن الموقع في الكود الذي تريد عرض تأثير الصورة فيه. انقر في الموقع ، ثم اضغط على "Ctrl-V" للصق مقتطف HTML. انقر فوق "معاينة التحديث" لاختبار التأثير في نافذة المعاينة. انقر فوق "حفظ" لحفظ التغييرات.
