如何解決RWD後導致map area固定位置跑版的失效模式_jQuery RWD Image Maps
在前一篇介紹到map area的一個做法
但其 FMEA 主要會發生在 RWD或者變更browser解析度後
圖片的座標位置就跑版了的問題
修正前的跑位問題
在此只能另尋解套方案
這裡一樣站在巨人的肩膀上
找到了大神寫好的這個jQuery library
官網提供的實驗案例sample 頁
那是採用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)
如何製作響應式的影像地圖
留言
張貼留言