imagemapをレスポンシブなページで使う

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

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

準備するもの:

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

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

手順:

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

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

以上です。簡単ですね!

意外と使えそう
いけだ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次