ایجاد Image Map ریسپانسیو

Image Map برای ایجاد نواحی قابل کلیک روی یک تصویر کاربرد دارد. با استفاده از Image Map تعداد تصاویر مورد نیاز در سایت کاهش می‌یابد، حجم صفحات کمتر می‌شود و در نتیجه می‌توان نتایج بهتری در بهینه‌سازی سایت یا سئو به دست آورد.

ایجاد Image Map با استفاده از عنصر <map> قابل انجام است که در نهایت این عنصر به یک تصویر متصل می‌شود و نواحی قابل کلیک آن را مشخص می‌کند.

هر تگ <area> داخل تگ <map>، می‌تواند تعيين کننده يک ناحيه مجزای قابل کليک شدن باشد که با تعيين مختصات آن بر روی تصویر، می‌توان ابعاد و شکل آن را مشخص نمود.

برای این کار می‌توان از ابزار آنلاین وب سایت http://imagemap-generator.dariodomi.de استفاده همچنین نرم‌افزار Fireworks نیز ابزارهای خوبی برای انجام این کار در اختیار شما قرار می‌دهد. نرم‌افزارهای آنلاین و آفلاین دیگری نیز برای انجام این کار وجود دارند که با جستجو در اینترنت می‌توانید آن‌ها را بیابید.

dd

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

استفاده از Image Map روی تصویر

برای استفاده از کد ایجاد شده Image Map روی تصویر مانند قطعه کد زیر عمل کنید:

Image Map واکنش‌گرا

اگر بخواهیم نقشه‌ی تصویر، واکنشگرا یا ریسپانسیو باشد، باید از افزونه جی‌کوئری jQuery RWD Image Maps استفاده شود. این افزونه بر اساس عرض نمایشی تصویر، عددهای قرارگرفته در Image Map را طوری تغییر می‌دهد که نواحی مشخص شده مجدد در محل مورد نظر قرار بگیرد.

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

 


مشاهده‌ی تمامی نوشته‌ها در گروه: طراحی سایت. ‏ فهرست برچسب‌ها: , , , .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *