1枚の画像で位置ごとにリンク先を分けたいときに便利な方法です
イメージマップやクリッカブルマップとも言います。
不動産サイトなどの地図がイメージしやすいかと思います。

 

エリア分けされたマップを作る

簡単にイメージマップを作成することができるツールがあります

https://labs.d-s-b.jp/ImagemapGenerator/

 

 

画像をアップしてマウス操作で簡単にエリアを設定できます

 

生成されたhtmlを編集して貼り付ければ使用できます

 

 

マップをレスポンシブに対応させる

https://github.com/stowball/jQuery-rwdImageMaps

上記ファイルをダウンロード

作成したマップに加え以下を追加します

 

 

WordPressの場合は以下のようにします

 

 

 

 

マウスをのせたら画像を変えたい

通常のリンクであればCSSでhover指定してささっと完了!なのですがイメージマップはそうもいかず

今回はjQueryで対応してみます

 

マップを編集

imgタグとareaタグにそれぞれIDを追加

 

マップに追加したIDを設定

 

これでおしまい

 

イメージマップですることはこれぐらいかなとまとめてみました。

 

 

 

Reader Interactions