#14 画像に複数のリンクを設定

イメージマップの作成ツールとして「HTML Imagemap Generator」を使用する。

このサイトに画像をドラック&ドロップし開き、
あとはリンクになる部分を図形ツールでドラックし作っていきます。

これでコードが出来上がってるのでそれをコピペします。

<img src=“〓画像のURL〓” usemap="#ImageMap" alt="" /> <map name="ImageMap"> <area shape="rect" coords="179,101,430,145" href="#" alt="" /> </map>

〓画像のURL〓 にwordpressの画像URLを入れる。

〓#〓には画像のリンク先のURLを入れる。

レスポンシブにするにはjQueryを使います。プラグイン「jQuery RWD Image Maps」をダウンロードしましょう。
https://github.com/stowball/jQuery-rwdImageMaps