レスポンシブ対応イメージマップ

画面サイズが変わってもリンク範囲が追従するイメージマップ

レスポンシブレイアウト対応イメージマップ。画像のサイズが変わってもリンク座標が追従する。

RWDImageMaps.min.js … [Code] → [Download ZIP] → [jquery.rwdImageMaps.min.js]

クリックしたときに上部に出現するモーダルウィンドウは、イメージマップとは別設定です。

DEMO

□ ○ △ その他 


<img src="sample.png" alt="" usemap="#map">
	<map id="map" name="map">
		<area shape="rect" coords="54,74,236,258" href="#rect" title="□" alt="□">
		<area shape="circle" coords="396,165,93" href="#circle" title="○" alt="○">
		<area shape="poly" coords="646,72,539,255,751,255,646,72" href="#poly" title="△" alt="△">
		<area shape="default" nohref title="その他" alt="その他">
	</map>


//jQuery必要
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="/path/to/jquery.rwdImageMaps.min.js"></script>
<script>
$(function(){
	$('img[usemap]').rwdImageMaps();
});
</script>

TOP