如何解決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)


如何製作響應式的影像地圖







留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題