حتماً در سایت های مختلف فروشگاهی و نمایشگاهی با صفحه محصولات مواجه شدید و مشاهده کردید که چگونه برای بهتر دیده شدن محصول، چند تصویر کوچک از آن را در کنار هم نمایش می دهند طوری که با قرارگرفتن اشاره گر ماوس روی هرکدام از این تصاویر که به آنها تصویر بندانگشتی می گوییم، یا کلیک کردن روی آنها، تصویر مربوطه در اندازه ای بزرگ تر نمایش داده می شود.
در این فیلم آموزشی نحوه طراحی چنین صفحه ای را آموزش داده ام. پروژه انجام شده در این ویدیو به این صورت است که تصاویر کوچکی از محصول را نمایش داده و کاری می کنیم که با عبور اشاره گر ماوس از روی آنها، تصویری که اشاره گر ماوس روی آن قرار گرفته با اندازه بزرگ تر نمایش داده شود. برای این منظور از تصاویر مختلف یک صندلی به عنوان محصول مورد نظر استفاده کرده ام.
برای انجام دادن پروژه تعریف شده در این فیلم از html برای نمایش تصاویر، از css برای قالب بندی صفحه و تصاویر و از متدهای jquery برای اداره کردن رویداد عبور اشاره گر ماوس استفاده می کنیم.

حاصل دوره 

در پایان این آموزش شما با نحوه نمایش تصاویر، تعدادی از دستورات قالب بندی تصاویر و صفحه و نحوه اداره کردن رویداد عبور اشاره گر ماوس بر روی عناصر آشنا می شوید. 

پیش نیاز

آشنایی مقدماتی با html و css

سرفصل های دوره طراحی صفحه‏ نمایش تصاویر محصولات سایت با HTML و CSS و jQuery