یک نکته مهم درباره استفاده از map و ریسپانسیو کردن map

در حین تمرین در این مبحث متوجه نکته ای شدم که خواستم با دیگران به اشتراک بزارم:

اگر مختصات مکان مورد نظر را در تگ map  مشخص کردید و بعد سایز عکس را با فتوشاپ یا css تغییر بدهید مختصات مورد نظر با عکس جدید تطبیق ندارد.

۱. باید ابتدا سایز عکس را در فتوشاپ تعیین کنید بعد مختصات را در سایت https://www.image-map.net بدست آورید.

۲. اگر با css سایز عکس را تعیین کردید مختصات را باید دستی تنظیم کنید.

ریسپانسیو کردن:

۱. با css عکس را ریسپانسیو کنید.

img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: 100%;
}

۲. مختصات عکس را از سایت https://www.image-map.net به دست بیاورید و وارد پروژه خود کنید.

۳. برای هندل کردن تغییرات مختصات map در حالت ریسپانسیو از افزونه جی‌کوئری  jQuery RWD Image Maps استفاده کنید.(آدرس زیر)

https://www.github.com/stowball/jQuery-rwdImageMaps