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

اگر مختصات مکان مورد نظر را در تگ 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