レスポンシブに対応させたimagemapを使いたい！

今回はタイトル通り、レスポンシブなimagemapを使いたい一心で、色々と試して上手くいった方法をご紹介したいと思います。
デモページはこちらです。

準備するもの：

・jquery-map-trifecta　こちらからご参照ください
・imagemap用の画像
・クリック箇所の座標を求めるためのツール（こういうのもあります　）

ソースはこんな感じです。

手順：

①imagemap用の画像と、座標を準備してimagemap部分のhtmlを作成します。
　クリック時に遷移させたい場合、hrefで無くonclickに書きます。

②jquery-map-trifectaのjsとcssを読み込み、以下のようなコードを書きます。
$("img[usemap]").mapTrifecta();
※オプション値を指定することもできます。公式git

以上です。簡単ですね！

意外と使えそう
いけだ