آموزش تصویری نحوه ساخت تصاویر جاوا اسکریپت حساس به وضعیت ماوس

0

مقدمه:دوستان خوبم انیمیشن‌های دو حالته فایل‌های گرافیکی هستند که در هنگام جابجایی نمایشگر ماوس بر روی نقطه معینی از طرح تغییر می‌یابند. این انیمیشن‌ها برای ایجاد جذابیت در لینک‌ها بخصوص در قسمت‌های گرافیکی که بطور واضح مشخص نشده‌اند مفید می‌باشد. ویژگی دو حالته شامل یک مرحله وضعیت عادی، یک وضعیت جابجایی ماوس و یک وضعیت کلیک است. در این کار عملی برای هر یک از این وضعیت‌ها یک تصویر ایجاد خواهیم کرد. برای بررسی در خصوص افکت دو حالته، در این کار عملی یک دکمه اولیه ایجاد می‌کنیم، سپس وضعیت آن را تغییر می‌‌دهیم. بعد از آنکه دکمه هر سه وضعیت مربوط به آن ایجاد شدند باید کد HTML آن، بعلاوه گرافیک‌های مربوط به آن را ذخیره کنید و سپس کد تولید شده را در صفحه مورد نظر خود قرار دهید.

 

ایجاد یک فایل جدید در Image Ready

ساخت تصاویر جاوا اسکریپت

در برنامه Image Ready گزینه FileNew را انتخاب کنید تا کادر محاوره‌ای New Document نمایان شود بطوریکه بتوانیــد یک فایل جدید ایجاد کنید. در این کار عملی، سندی با نام Rollover Test ایجاد کرده و مقادیر عرض و ارتفاع آن را ۱۰۰ تعیین کنید. سپس دکمه رادیویی White را برای تعیین پس‌زمینه سفید انتخاب کرده و OK را کلیک نمائید.

 

ایجاد دکمه

رنگ پیش زمینه‌ای که می‌خواهید در تصویر دکمه از آن استفاده کنید را انتخاب نمائید. سپس ابزار Elliptical Marquee را انتخاب کنید و در حالیکه کلید Shift را پائین نگه داشته‌اید در داخل تصویر یک دایره ترسیم کنید. از ابزار سطل رنگ (Paint Bucket) برای پر کردن شکل دکمه با رنگ تعیین شده در قسمت پیش زمینه استفاده کنید.

 

افزودن افکت لایه

برای ایجاد حالت سه بعدی گزینه LayerLayer StyleBevel and Emboss را انتخاب کنید. پارامترهای مورد نظرتان را در پالت Bevel and Emboss ای که نمایان می‌شود تعیین کنید. در صورت تمایل می‌توانید برای ایجاد یک شکل طبیعی‌تر از دکمه، از افکت Outer Glow استفاده کنید. تنها کافی است بر روی گزینه Outer Glow که در سمت چپ کادر محاوره‌ای Layer Style قرار دارد کلیک کنید و گزینه‌ها را انتخاب کنید. همانند شکل زیر:

کپی از لایه موجود

ساخت تصاویر جاوا اسکریپت
ساخت تصاویر جاوا اسکریپت

لینک مطلب

پاسخ دهید