تغيير الصورة عند مرور الفأرة عليها

كثيراً ما نلاحظ في كثير من المواقع وجود بعض الصور التي تتغير عند وجود الماوس عليها. و ما يحدث في الواقع هو أن هذه الصورة عند وجود الماس عليها يتم استبدالها بصورة أخرى تشبهها و لكن بمؤثرات مختلفة فتعطي الايحاء بالحركة :-)

طبعاً يمكن القيام بذلك باستخدام العديد من برامج الصور.

لنحصل على شيء مثل هذا:

والآن..سنتبع بعض التعليمات لعمل شيء مشابه، و سيكون الكود بسيط ان شاء الله.

المقادير (هاهاها)

صورة و لنفرض أنها صورة هذه النجمة:

نفس الصورة (نفس المقاييس) بمؤثرات أخرى مثل هذه الصورة:

السيكربت

في ملف فارغ نكتب مايلي:

ملاحظات

• في أمر الربط في الهتمل يجب أن نضيف السطر المظلل و المكون من جزئين أحدهما onMouseOver و هو يعني الصورة التي ستظهر عند حركة الماوس فوق الصورة. و onMouseOut و هو يعني الصورة التي ستظهر عند عدم تحريك الماوس على الصورة.

• لاحظوا معي أن الكلمات المكتوبة باللون الأخضر هي في الواقع ما يمكن تبديله بأسماء الصور التي تريدونها، أو الموقع الذي في حالة تم الضغط على الصورة تريدون الذهاب اليه.

• كلمة star و الموجودة باللون الوردي، فهي الاسم الذي أعطيناه للصورة. و هكذا تستطيعون أن تبدلوا ال src لها في أي مكان في السيكريبت عن طريق تبديل document.star.src و هذه طريقة لل refere لأي صورة في الهتمل.

• يمكن أن تكتبوا الموقع الكامل أو النسبي (Absolute or relative location) للصورة بدل من اسمها فقط مثل أن تكتبوا images/img.gif أو http://www.somename.com/images/myimage.gif.

آمل أن تستفيدوا من هذا الدرس..

وفوق كل ذي علم عليم

أوشال