レスポンシブに対応させたimagemapを使いたい!
今回はタイトル通り、レスポンシブなimagemapを使いたい一心で、色々と試して上手くいった方法をご紹介したいと思います。
デモページはこちらです。
準備するもの:
・jquery-map-trifecta こちらからご参照ください
・imagemap用の画像
・クリック箇所の座標を求めるためのツール(こういうのもあります )
ソースはこんな感じです。
手順:
①imagemap用の画像と、座標を準備してimagemap部分のhtmlを作成します。
クリック時に遷移させたい場合、hrefで無くonclickに書きます。
②jquery-map-trifectaのjsとcssを読み込み、以下のようなコードを書きます。
$(“img[usemap]”).mapTrifecta();
※オプション値を指定することもできます。公式git
以上です。簡単ですね!
意外と使えそう
いけだ