آموزش رایگان ساخت نقشه ایران با قابلیت کلیک روی استانها بصورت واکنشگرا با Html | Css | Jquery | Bootstap

آموزش رایگان و پروژه محور ساخت نقشه ایران قابل کلیک

نقشه ایران با قابلیت کلیک روی استان‌ها یکی از نیازهای رایج سایت‌های فروشگاهی و خدماتی محسوب می‌شه. در این مینی پروژه قراره با HTML، CSS، Bootstrap و jQuery یه نقشه SVG واکنش‌گرا بسازیم که کاربر بتونه استان مورد نظرش رو انتخاب کنه.

نقشه به صورت یه فایل SVG پیاده‌سازی شده که هر استان یه مسیر جدا داره. این ساختار باعث می‌شه نقشه توی هر اندازه‌ای کیفیتش حفظ بشه و واکنش‌گرا باشه. نقشه توی یه مودال تمام‌صفحه باز می‌شه.

کنار نقشه، لیست استان‌ها قرار گرفته. این لیست دوتایی چیده شده تا فضای کمتری بگیره و کاربر سریع‌تر استانش رو پیدا کنه. هر استان توی یه کادر جدا نمایش داده می‌شه.

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

با کلیک روی هر استان، همون استان توی نقشه و لیست فعال می‌شه و رنگش تغییر می‌کنه. اسم استان هم توی دکمه بالای صفحه جایگزین متن قبلی می‌شه. بعد از انتخاب، مودال به صورت خودکار بسته می‌شه.

این هماهنگی با jQuery پیاده‌سازی شده. کلاس‌های hover و active بین نقشه و لیست جابه‌جا می‌شن تا هر دو بخش همیشه هم‌رنگ و هماهنگ باشن.

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

نکته کاربردی این پروژه، یادگیری کار با SVG و هماهنگ‌سازی عناصر مختلف با jQuery هست. این مهارت توی پروژه‌هایی که نقشه یا نمودار تعاملی دارن، مستقیم به درد می‌خوره.

در نهایت یه نقشه ایران تعاملی داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این جور قابلیت‌ها رو در قالب یه پروژه فروشگاهی کامل پیاده کنی، ساخت کامل سایت فروشگاهی دیجی کالا می‌تونه قدم بعدی مناسبی باشه.