یک تصویر غلطکی یک تصویر است که وقتی به شما یا مشتری خود موس را روی آن رول می دهد به یک تصویر دیگر تغییر می کند. اینها معمولا برای ایجاد یک احساس تعاملی مانند دکمه ها یا زبانه ها استفاده می شود. اما شما می توانید تصاویر رولرز را فقط در مورد هر چیزی ایجاد کنید.
این آموزش طراحی شده است تا به شما کمک کند یک تصویر rollover در Dreamweaver ایجاد کنید . برای افرادی که با استفاده از نسخه های زیر Dreamweaver استفاده می شوند، این برنامه برای استفاده است:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
شرایط لازم برای این آموزش
- Dreamweaver
یکی از نسخه های ذکر شده در بالا - یک تصویر اصلی
اطمینان حاصل کنید که این تصویر را بهینه سازی کنید. این به صفحات شما کمک می کند تا سریع تر بارگذاری شوند. - تصویر غلطک
این تصویر باید همان ابعاد تصویر اصلی باشد. و مانند تصویر اصلی باید برای کمک به بار بار صفحه بهینه سازی شود. - یک صفحه وب
این صفحه HTML است که در آن شما تصویر غلط خود را قرار داده اید.
01 از 06
شروع کنید
- شروع Dreamweaver
- صفحه وب را در جایی که میخواهید رولر را باز کنید باز کنید
02 از 06
یک شیء تصویر Image Rollover را وارد کنید
Dreamweaver باعث می شود که یک تصویر چرخشی ایجاد شود.
- به منوی Insert بروید و به قسمت زیر منوی Image Objects بروید.
- انتخاب "رول تصویر" یا "تصویر رولروور"
بعضی از نسخه های قدیمی Dreamweaver به جای Object های تصویر "تصاویر تعاملی" تماس می گیرند.
03 از 06
به Dreamweaver بگویید چه تصاویری برای استفاده
Dreamweaver یک جعبه محاوره ای با زمینه هایی که شما نیاز دارید برای پر کردن آن ایجاد کنید، برای ایجاد تصویر غلطک خود استفاده کنید.
نام تصویر
یک نام تصویری که برای صفحه منحصر به فرد است را انتخاب کنید. این باید یک کلمه باشد، اما شما می توانید از اعداد، اشکال (_) و خطوط (-) استفاده کنید. این برای شناسایی تصویر برای تغییر استفاده می شود.
تصویر اصلی
این URL یا محل تصویری است که در صفحه شروع می شود. شما می توانید URL های نسبی یا مطلق مسیر در این فیلد را استفاده کنید. این باید تصویری باشد که در وب سرور شما وجود دارد یا اینکه شما با صفحه آپلود کنید.
تصویر متحرک
این تصویری است که وقتی روی تصویر کلیک میکنید ظاهر می شود. درست مانند تصویر اصلی، این می تواند یک مسیر مطلق یا نسبی به تصویر باشد، و هنگامی که صفحه شما آپلود می شود، باید آن را داشته باشد یا آپلود شود.
قبل از بارگذاری Image Rollover
این گزینه به طور پیش فرض انتخاب شده است، زیرا این امر به نوبه خود کمک می کند تا سریعا ظاهر شود. با انتخاب پیش بارگذاری تصویر چرخاندن، مرورگر وب آن را در حافظه پنهان ذخیره می کند تا زمانی که موس روی آن قرار بگیرد.
متن جایگزین
متن جایگزین باعث می شود تصاویر شما بیشتر قابل دسترسی باشد. هنگام اضافه کردن هر یک از تصاویر، همیشه باید نوعی متنی متنی را استفاده کنید.
هنگامی که کلیک کردید، برو به URL
اکثر افراد وقتی یک صفحه را می بینند بر روی یک تصویر کلیک می کنند. بنابراین باید عادت داشته باشید که آنها را قابل کلیک کنید. این گزینه به شما اجازه می دهد تا صفحه یا URL را مشخص کنید تا بیننده را هنگامی که روی تصویر کلیک می کنید، انتخاب کنید. اما این گزینه برای ایجاد یک چرخش لازم نیست.
هنگامی که تمام زمینه ها را تکمیل کرده اید، روی OK کلیک کنید تا Dreamweaver تصویر خود را به تصویر بکشاند.
صفحه بعدی نشان می دهد که اسکریپت Dreamweaver می نویسد.
04 از 06
Dreamweaver جاوا اسکریپت را برای شما می نویسد
اگر صفحه را در صفحه کد باز کنید، خواهید دید که Dreamweaver یک بلوک جاوا اسکریپت را در
سند HTML خود قرار می دهد. این بلوک شامل 3 عملکردهای است که شما نیاز به تغییر تصاویر را هنگامی که ماوس روی آنها رول می دهد و عملکرد پیش بارگذاری اگر شما آن را انتخاب کردید.عملکرد MM_swapImgRestore ()
عملکرد MM_findObj (n، d)
عملکرد MM_swapImage ()
عملکرد MM_preloadImages ()
05 از 06
Dreamweaver HTML را برای Rollover اضافه می کند
اگر شما تصمیم به Dreamweaver داشتید، تصاویر پیشنهادی را قبل از بارگذاری قرار دهید، سپس کد HTML را در قسمت سند خود مشاهده خواهید کرد تا اسکریپت پیش بارگذاری را فراخوانی کنید تا تصاویر شما سریعتر شوند.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver همچنین تمام کد های تصویر خود را اضافه می کند و آن را پیوند می دهد (اگر شما یک URL را اضافه کردید). قسمت غلطکی به عنوان تابع لنگر به عنوان onmouseover و attributes onmouseout اضافه می شود.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1'، ''، 'shasta1.jpg'، 1)"
06 از 06
تست از Rollover
تصویر کامل رولر را مشاهده کنید و آنچه که در ذهن شاستا است را بیاموزید.