صورة التمديد هي صورة تتغير إلى صورة أخرى عندما تقوم أنت أو العميل بكلف الماوس فوقها. تستخدم هذه الأساليب بشكل عام لإنشاء إحساس تفاعلي مثل الأزرار أو علامات التبويب. ولكن يمكنك إنشاء صور متحركة من أي شيء.
تم تصميم هذا البرنامج التعليمي لمساعدتك في إنشاء صورة متغيرة في Dreamweaver . الغرض منه هو استخدامه بواسطة الأشخاص الذين يستخدمون الإصدارات التالية من Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
متطلبات هذا البرنامج التعليمي
- دريمويفر
أحد الإصدارات المذكورة أعلاه. - صورة أصلية
تأكد من تحسين هذه الصورة. سيساعد هذا في تحميل صفحاتك بسرعة أكبر. - صورة التمديد
يجب أن تكون هذه الصورة بنفس أبعاد الصورة الأصلية. ومثل الصورة الأصلية ، يجب تحسينها لمساعدة أوقات تحميل الصفحة. - صفحة على شبكة الإنترنت
هذه هي صفحة HTML حيث ستضع صورة التمديد.
01 من 06
البدء
- ابدأ Dreamweaver
- افتح صفحة الويب التي تريد فيها الانتقال
02 من 06
إدراج كائن صورة صورة Rollover
يعمل Dreamweaver على تسهيل إنشاء صورة متحركة.
- انتقل إلى قائمة "إدراج" وإلى أسفل إلى القائمة الفرعية "كائنات الصور".
- حدد "صورة التمديد" أو "صورة الالتفاف"
تتصل بعض الإصدارات القديمة من Dreamweaver بكائنات الصور "الصور التفاعلية" بدلاً من ذلك.
03 من 06
أخبر Dreamweaver ما الصور المراد استخدامها
ينبثق Dreamweaver مربع حوار يحتوي على الحقول التي تريد تعبئتها لإنشاء صورة التمديد.
اسم الصورة
اختر اسمًا للصورة فريدًا للصفحة. يجب أن يكون كل كلمة واحدة ، ولكن يمكنك استخدام الأرقام والشرطات السفلية (_) والواصلات (-). سيتم استخدام هذا لتحديد الصورة لتغييرها.
الصورة الأصلية
هذا هو عنوان URL أو موقع الصورة التي ستبدأ على الصفحة. يمكنك استخدام عناوين URL للمسارات النسبية أو المطلقة في هذا الحقل. يجب أن تكون هذه صورة موجودة على خادم الويب أو التي ستحملها مع الصفحة.
صورة Rollover
هذه هي الصورة التي ستظهر عند تحريك الماوس فوق الصورة. تمامًا مثل الصورة الأصلية ، يمكن أن يكون هذا مسارًا مطلقًا أو نسبيًا للصورة ، ويجب أن يكون موجودًا أو يتم تحميله عند تحميل الصفحة.
Preload صورة التمديد
يتم تحديد هذا الخيار افتراضيًا لأنه يساعد في ظهور التمرير بشكل أسرع. باختيار تحميل صورة التمرير المسبق ، سيقوم متصفح الويب بتخزينها في ذاكرة تخزين مؤقت حتى يتدحرج الماوس فوقها.
نص بديل
يجعل النص البديل الجيد صورك أكثر سهولة. يجب عليك دائمًا استخدام نوع من النص البديل عند إضافة أي صور.
عند النقر عليها ، انتقل إلى URL
سينقر معظم الأشخاص على صورة عندما يرون صورة على الصفحة. لذلك يجب أن تكون في العادة لجعلها قابلة للنقر. يتيح لك هذا الخيار تحديد الصفحة أو عنوان URL لنقل العارض إلى عند النقر على الصورة. لكن هذا الخيار غير مطلوب لإنشاء عملية تحويل.
عند الانتهاء من كافة الحقول ، انقر فوق "موافق" لإنشاء Dreamweaver لإنشاء صورة التمرير.
تعرض الصفحة التالية البرنامج النصي الذي يكتبه Dreamweaver.
04 من 06
Dreamweaver يكتب جافا سكريبت لك
إذا قمت بفتح الصفحة في عرض التعليمات البرمجية ، فسترى أن Dreamweaver يقوم بإدراج كتلة من JavaScript في
في مستند HTML الخاص بك. يتضمن هذا الكتل الوظائف الثلاث التي تحتاج إليها لتبديل الصور عند تمرير الماوس فوقها ووظيفة التحميل المسبق إذا اخترت ذلك.وظيفة MM_swapImgRestore ()
وظيفة MM_findObj (n، d)
وظيفة MM_swapImage ()
وظيفة MM_preloadImages ()
05 من 06
يضيف Dreamweaver HTML للتمرير
إذا اخترت أن يقوم Dreamweaver بتجديد التحميل المسبق للصور المتحركة ، فسترى رمز HTML في نص المستند لاستدعاء البرنامج النصي المسبق لتحميل صورك بسرعة أكبر.
ONLOAD = "MM_preloadImages ( 'shasta2.jpg')"
يضيف Dreamweaver أيضًا كل رمز لصورتك ويربطها (إذا قمت بتضمين عنوان URL). تتم إضافة جزء التمرير إلى العلامة المرساة كسمات onmouseover و onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1 و'، ''، 'shasta1.jpg'، 1)"
06 من 06
اختبر التمديد
شاهد صورة التمرير الكاملة الوظيفية وتعرف على ما يدور في ذهن شاستا.