忘れた頃にごく稀に使うことになるクリッカブルマップ。
レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。
jQuery非依存で結構簡単に導入できます。
画像とHTMLを用意
とりあえずクリッカブルマップに使用する画像を用意します。
HTMLについては『HTML Imagemap Generator』さんを使用します。
画像をドラッグ&ドロップしましょう。
あとは右側のツールを使って図形をなぞるだけです。大変便利です。
コードが生成されるので、画像のパスやusemap、リンク先などは調整しましょう。
|
1 2 3 4 5 6 |
<img src="sample.jpg" usemap="#ImageMap" alt="" /> <map name="ImageMap"> <area shape="circle" coords="154,202,92" href="#" alt="" /> <area shape="poly" coords="365,120,281,279,450,279" href="#" alt="" /> <area shape="rect" coords="500,120,662,281" href="#" alt="" /> </map> |
image-map-resizerをダウンロード
それでは『image-map-resizer』をGithubからDLしましょう。
image-map-resizer
展開したらjsのフォルダを開くと『imageMapResizer.js』『imageMapResizer.min.js』が入っているので都合のいい方を使いましょう。
ちなみにCDN版もあるので今回はそちらを使おうと思います。
|
1 2 |
<script src="//cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script> <script>imageMapResize();</script> |
下で『imageMapResize();』も読み込ませるのを忘れないようにしてください。
完成
はい、これだけの手順で完了しました。
See the Pen
クリッカブルマップ by kkdd (@kk8kk)
on CodePen.
わかりづらい場合はこちらからウィンドウを動かして確認してみてください。
SVGリンクなどもあるので出番は減っていると思いますがたまに使うクリッカブルマップ。
対応することがあったら使ってみてください。
