البرنامج التعليمي لإنشاء صورة Rollover في Dreamweaver

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

تم تصميم هذا البرنامج التعليمي لمساعدتك في إنشاء صورة متغيرة في Dreamweaver. الغرض منه هو استخدامه بواسطة الأشخاص الذين يستخدمون الإصدارات التالية من Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

متطلبات هذا البرنامج التعليمي

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

البدء

1. ابدأ Dreamweaver
2. افتح صفحة الويب التي تريد فيها الانتقال

إدراج كائن صورة متحركة

يعمل Dreamweaver على تسهيل إنشاء صورة متحركة.

1. انتقل إلى قائمة "إدراج" وإلى الأسفل كائنات الصور جنوب القائمة.
2. تحديد تمرير الصورة أو صورة متحركة.

تتصل بعض الإصدارات القديمة من Dreamweaver بكائنات الصور "الصور التفاعلية" بدلاً من ذلك.

أخبر Dreamweaver ما الصور المراد استخدامها

ينبثق Dreamweaver مربع حوار يحتوي على الحقول التي تريد تعبئتها لإنشاء صورة التمديد.

اسم الصورة

اختر اسمًا للصورة فريدًا للصفحة. يجب أن يكون كل كلمة واحدة ، ولكن يمكنك استخدام الأرقام والشرطات السفلية (_) والواصلات (-). سيتم استخدام هذا لتحديد الصورة لتغييرها.

الصورة الأصلية

هذا هو عنوان URL أو موقع الصورة التي ستبدأ على الصفحة. يمكنك استخدام عناوين URL للمسارات النسبية أو المطلقة في هذا الحقل. يجب أن تكون هذه صورة موجودة على خادم الويب أو سترفعها باستخدام الصفحة.

صورة Rollover

هذه هي الصورة التي ستظهر عند تحريك الماوس فوق الصورة. تمامًا مثل الصورة الأصلية ، يمكن أن يكون هذا مسارًا مطلقًا أو نسبيًا للصورة ، ويجب أن يكون موجودًا أو يتم تحميله عند تحميل الصفحة.

Preload صورة التمديد

يتم تحديد هذا الخيار افتراضيًا لأنه يساعد في ظهور التمرير بشكل أسرع. باختيار تحميل صورة التمرير المسبق ، سيقوم متصفح الويب بتخزينها في ذاكرة تخزين مؤقت حتى يتدحرج الماوس فوقها.

نص بديل

يجعل النص البديل الجيد صورك أكثر سهولة. يجب عليك دائمًا استخدام نوع من النص البديل عند إضافة أي صور.

عند النقر عليها ، انتقل إلى URL

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

عندما تنتهي من جميع الحقول ، انقر فوق حسنا لجعل Dreamweaver يقوم بإنشاء صورة التمديد.

Dreamweaver يكتب جافا سكريبت لك

إذا قمت بفتح الصفحة في عرض الكود ، فسترى أن Dreamweaver يقوم بإدراج كتلة من JavaScript في من مستند HTML الخاص بك. يتضمن هذا الكتل الوظائف الثلاث التي تحتاج إليها لتبديل الصور عند تمرير الماوس فوقها ووظيفة التحميل المسبق إذا اخترت ذلك.

وظيفة MM_swapImgRestore ()وظيفة MM_findObj (n، d)وظيفة MM_swapImage ()وظيفة MM_preloadImages ()

يضيف Dreamweaver HTML للتمرير

إذا اخترت أن يقوم Dreamweaver بتجديد التحميل المسبق للصور المتحركة ، فسترى رمز HTML في نص المستند لاستدعاء البرنامج النصي المسبق لتحميل صورك بسرعة أكبر.

ONLOAD = "MM_preloadImages ( 'shasta2.jpg')"

يضيف Dreamweaver أيضًا كل رمز لصورتك ويربطها (إذا قمت بتضمين عنوان URL). تتم إضافة جزء التمرير إلى العلامة المرساة كسمات onmouseover و onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1 و'، ''، 'shasta1.jpg'، 1)"

اختبر التمديد

شاهد صورة التمرير الكاملة الوظيفية وتعرف على ما يدور في ذهن شاستا.