در این فیلم آموزشی نحوه طراحی چنین صفحه ای را آموزش داده ام. پروژه انجام شده در این ویدیو به این صورت است که تصاویر کوچکی از محصول را نمایش داده و کاری می کنیم که با عبور اشاره گر ماوس از روی آنها، تصویری که اشاره گر ماوس روی آن قرار گرفته با اندازه بزرگ تر نمایش داده شود.
حتماً در سایت های مختلف فروشگاهی و نمایشگاهی با صفحه محصولات مواجه شدید و مشاهده کردید که چگونه برای بهتر دیده شدن محصول، چند تصویر کوچک از آن را در کنار هم نمایش می دهند طوری که با قرارگرفتن اشاره گر ماوس روی هرکدام از این تصاویر که به آنها تصویر بندانگشتی می گوییم، یا کلیک کردن روی آنها، تصویر مربوطه در اندازه ای بزرگ تر نمایش داده می شود. در این فیلم آموزشی نحوه طراحی چنین صفحه ای را آموزش داده ام. پروژه انجام شده در این ویدیو به این صورت است که تصاویر کوچکی از محصول را نمایش داده و کاری می کنیم که با عبور اشاره گر ماوس از روی آنها، تصویری که اشاره گر ماوس روی آن قرار گرفته با اندازه بزرگ تر نمایش داده شود. برای این منظور از تصاویر مختلف یک صندلی به عنوان محصول مورد نظر استفاده کرده ام. برای انجام دادن پروژه تعریف شده در این فیلم از html برای نمایش تصاویر، از css برای قالب بندی صفحه و تصاویر و از متدهای jquery برای اداره کردن رویداد عبور اشاره گر ماوس استفاده می کنیم.
در پایان این آموزش شما با نحوه نمایش تصاویر، تعدادی از دستورات قالب بندی تصاویر و صفحه و نحوه اداره کردن رویداد عبور اشاره گر ماوس بر روی عناصر آشنا می شوید.
آشنایی مقدماتی با html و css
معرفی دوره
معرفی تگ ها و بعضی از خصوصیات به کار رفته در پروژه
نمایش تصاویر محصول و قالب بندی آنها
کدنویسی متدهای jQuery برای اداره کردن رویداد عبور اشاره گر ماوس بر روی تصاویر
دانلود مستقیم پیش نمایش (نمایش تصاویر محصولات) - حجم دانلود 6 مگابایت (کلیک کنید +)
مدرس رشته کامپیوتر هنرستان های آموزش و پرورش، مولف و مترجم کتاب، مدرس دوره های آموزش کامپیوتر، علاقه مند به طراحی سایت و برنامه نویسی
توجه: کیفیت این محصول توسط بیـــاموز تضمین شده است. در صورت عدم رضایت شما، ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.
برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.
در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...
