如何解決RWD後導致map area固定位置跑版的失效模式_jQuery RWD Image Maps
在前一篇介紹到map area的一個做法 但其 FMEA 主要會發生在 RWD或者變更browser解析度後 圖片的座標位置就跑版了的問題 修正前的跑位問題 在此只能另尋解套方案 這裡一樣站在巨人的肩膀上 找到了大神寫好的這個jQuery library https://github.com/stowball/jQuery-rwdImageMaps 官網提供的實驗案例sample 頁 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html 那是採用MIT授權 因此免費商用是沒問題 在此透過CDN引入jQuery RWD Image Maps 前提是你也在前面有引入jQuery 那就補加上此段即可把Image Map RWD進行校正 1 2 3 4 5 6 7 8 9 10 11 12 <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" ></script> </head> <body > <script type= "text/javascript" > $( document ).ready( function () { $( 'img[usemap]' ).rwdImageMaps(); }); </script> </body> DEMO Ref: HTML Image Map 影像地圖 jQuery 推薦插件：maphilight (加強特效)、rwdImageMaps (支援RWD) https://mnya.tw/cc/word/1252.html 如何製作響應式的影像地圖 http://blog.shihshih.com/responsive-image-map/ https://cdnjs.com/libraries/jQuery-rwdImageMaps
.png)
