مبدأ الإنتاج
مبدأ إنشاء صور مبادلة هو أداة Swap image المطبقة على لوحة السلوك في Dreamweaver. اضبطه بحيث عندما يحوم الماوس فوق صورة زر معينة، دع الزر نفسه يحقق تبادلًا للصور (يتم تبادلها إلى صورة بنص أصفر)، وفي نفس الوقت يصمم تبادل صور المؤشر (يتم تبادلها إلى مؤشر يشير إلى صورة مؤشر الزر الحالية) لتحقيق التأثير أعلاه.
^-^: في الواقع، تبدو بعض الأشياء الموجودة على صفحة الويب غامضة للغاية، ولكن في الأساس، فهي مجرد تغيير بسيط لعدد قليل من الصور أو بضع طبقات.
صياغة المواد
ما تم توضيحه هنا هو قلب 7 صور للأزرار، لذلك نحتاج إلى إنشاء إجمالي 21 صورة و14 صورة للأزرار و7 صور للمؤشر لتحقيق التأثير الموضح. من بينها، 7 صور للأزرار الأمامية تحمل اسم B1-1~B1-7 على التوالي، و7 صور لأزرار الخلفية تحمل اسم B2-1~B2-7 على التوالي، و7 صور مؤشر تحمل اسم Z1~Z7 على التوالي، وتشير مؤشراتها إلى الأزرار من واحد إلى سبعة. يمكنك استخدام برامج إنشاء الصور مثل Fireworks لإنشاء صور الأزرار.
طريقة التحضير
1. قم بإنشاء ملف صفحة ويب.
2. أدخل جدولاً مقاس 7×2 وادمج العمود الأيسر من الجداول لإدراج صورة المؤشر. تُستخدم الجداول السبعة الموجودة على اليمين لإدراج صور الأزرار.
3. أدخل صورة المؤشر الأولى Z1 في الجدول الموجود على اليسار، وأدخل الأزرار الأمامية الزرقاء B1-1~B1-7 في الصفوف السبعة من الخلايا الموجودة على اليمين (يظهر التأثير في الشكل 2).
4. انقر فوق "نافذة (Windows) → السلوك" لإظهار لوحة السلوك.
5. حدد الصورة الأولى لضبط السلوك، وهذه هي صورة الزر مكتوب عليها "فكرة إرشادية"، وهي الصورة B1-1.
6. انقر فوق زر علامة الجمع وحدد Swap image في القائمة المنبثقة ليظهر مربع حوار Swap image. سيتم تنفيذ الجزء الرئيسي من إعداداتنا في مربع الحوار هذا.
7. انقر فوق زر الاستعراض في مربع الحوار، ثم حدد الصورة الوجهة التي سيتم قلب صورة الزر فيها، وفي هذه الحالة، هي صورة الزر ذات النص الأصفر، وهي الصورة B2-1. ثم انقر فوق موافق.
8. كرر الخطوة 6، وحدد صورة المؤشر Z1 في مربع النص الخاص بالصورة، ثم انقر فوق زر الاستعراض مرة أخرى لقلبه إلى ملف المؤشر الأول، Z1. انقر فوق موافق. بعد الانتهاء من العمليات المذكورة أعلاه، تظهر نتائج العرض على لوحة السلوك في الشكل 3.
9. حدد صورة الزر الثاني B1-2، واقلبها إلى الزر B2-2 وفقًا للطريقة المذكورة أعلاه، واقلب صورة المؤشر إلى صورة المؤشر الثانية Z2.
10. اتبع الخطوات المذكورة أعلاه وقم بضبط الصور الخمس التالية على سلوك تبادل الصور.
11. اضغط على F12 لمعاينة كل صورة وتحريك مؤشر الماوس فوقها. ماذا عن ذلك؟