كيفية إنشاء تأثير تحول الصورة (تحول الصورة أثناء تمرير الفأرة عليها)

عند تطبيق هذا التأثير على صورة معينة فإن هذه الأخيرة ستتغير إلى صورة أخرى أثناء تمرير الفأرة عليها و ستعود إلى الصورة الأصلية بمجرد ابتعاد الفأرة عنها.

مثال حي : مرر مؤشر الفأرة فوق الصورة أدناه لرؤية تأثير التحول.

كيفية إنشاء التأثير :

<a href="الرابط"><img src="رابط الصورة الأولى" onmouseover="this.src='رابط الصورة الثانية'" onmouseout="this.src='رابط الصورة الأولى'" /></a>

غيِّر النصوص الملونة كما يلي :

الرابط :

سيتم إرسال الزائر إلى هذا الرابط عندما ينقر على الصورة.
مثال : http://www.afkarpro.blogspot.com

رابط الصورة الأولى : 

استبدل النص الأزرق (مرتين) برابط الصورة التي ستظهر قبل أن تمرر مؤشر الفأرة فوقها.

رابط الصورة الثانية : 

استبدل النص الأخضر برابط الصورة التي ستظهر أثناء تمرير مؤشر الفأرة فوقها.

الآن يمكنك لصق الصورة في أي مكان داخل مدونتك، و ذلك بالذهاب إلى "تخطيط" ثم النقر على "إضافة أداة" (أي مكان) ثم اختيار "html/javascript" من النافذة المنبثقة، ثم لصق الكود.

يمكنك أيضا إضافتها داخل مشاركة معينة من خلال الذهاب إلى "مشاركة جديدة"  و النقر على علامة التبويب HTML ثم لصق الكود.

تم بحمد الله :)

*! أتمنى أن أكون قد وفقت في إيصال المعلومة ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...