JavaScript ( الدرس الثالث عشر ) : JavaScript Animation

[ريفــــــــــــــــان]

.





JavaScript Animation
الصور المتحركة في الجافا سكربت

رابط الدرس . .




درسنا اليوم لذيذ جداً وممتع
حيث أنه باستطاعتنا أن ننشئ صوراً متحركة مع الجافا سكربت
والخدعة في ذلك هي أننا نجعل الجافا سكربت تُبدّل بين صور مختلفة عند أحداث مختلفة
فتبدو وكأنها متحركة . .


سنأخذ مثال للتوضيح :

في المثال التالي سنضيف صورة و تكون كـ زر أو button يؤدي إلى رابط معين
وسنضع دالتين functions وظيفتهما التبديل بين الصور
- الدالة الأولى تعمل في في حدث الـ onMouseOver ( أي عند تمرير الماوس على الصورة )
- والدالة الثانية تعمل في حدث الـ onMouseOut (أي عند إبعاد الماوس عن الصورة )

كود الـ HTML سيكون بهذ االشكل

كود PHP:

<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a> 


* نلاحظ أننا قمنا بإعطاء الصورة اسم لنجعلها متاحة للجافا سكربت وتصل إليها بسهولة

الحدث onMouseOver يخبر المتصفح بأن الفأرة مرّت على الصورة
حتى يقوم المتصفح بتنفيذ الدالة التي تبدّل الصورة بصورة أخرى

الحدث onMouseOut يخبر المتصفح بأن الفأرة ابتعدت عن الصورة
حتى يقوم المتصفح بتنفيذ الدالة الأخرى التي تعيد الصورة الأصلية


كود الـ جافا سكربت لنفس المثال والذي بواسطته تم التبديل بين الصور

سيكون بهذ االشكل . .

كود PHP:

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif";
}
function mouseOut()
{
document.b1.src ="b_pink.gif";
}
</script> 


الدالة mouseOver() تتسبب في تحوّل الصورة إلى "b_blue.gif"

الدالة mouseOut() تتسبب في تحوّل الصورة إلى "b_pink.gif"

ـ

الكود كاملاً على المحرر . .

هــنـــا



:: الواجب ::

هنا نجد عدداً من أحداث الجافا سكربت . .

http://www.w3schools.com/jsref/jsref_events.asp

اختر أي حدث ليتم التبديل بين صورتين . .

واطبع عبارة توضح للمستخدم مالحدث المطلوب منه إجراؤه لتتغيّر الصورة

مثلاً . . عبارة

" مرّر الماوس على الصورة "

إذا كنت قد استخدمت حدث المرور بالماوس . .



بالتوفيق للجميع






.