كيفية إنشاء صورة Rollover في Dreamweaver

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

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

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

01 من 06

البدء

شاستا صورة التمديد سبيل المثال. صورة © 2001-2012 J Kyrnin - صورة مرخصة لموقع About.com
  1. ابدأ Dreamweaver
  2. افتح صفحة الويب التي تريد فيها الانتقال

02 من 06

إدراج كائن صورة صورة Rollover

إدراج كائن الصورة. لقطة شاشة بواسطة J Kyrnin

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

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

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

03 من 06

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

املأ المعالج. لقطة شاشة بواسطة J Kyrnin

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

اسم الصورة

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

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

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

صورة Rollover

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

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

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

نص بديل

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

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

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

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

تعرض الصفحة التالية البرنامج النصي الذي يكتبه Dreamweaver.

04 من 06

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

جافا سكريبت. لقطة شاشة بواسطة J Kyrnin

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

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

05 من 06

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

HTML. لقطة شاشة بواسطة J Kyrnin

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

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

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

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

06 من 06

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

شاستا صورة التمديد سبيل المثال. صورة © 2001-2012 J Kyrnin - صورة مرخصة لموقع About.com

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