- Coding Methodology
- 第85回 レスポンシブ対応 ロールオーバークリッカブルマップの実装
第85回 レスポンシブ対応 ロールオーバークリッカブルマップの実装
SEOの観点から最近はあまり使われなくなってきたクリッカブルマップですが、地図やイラストの一部から他のページにリンクする場合など、まだまだ使用するタイミングは多いと思います。今回はそんなクリッカブルマップをレスポンシブに対応させ、ロールオーバーも同時に実装してみましょう。
クリッカブルマップをレスポンシブ対応させる
クリッカブルマップのリンクエリアはマップとなる画像の左上を基準にした座標で指定するため、従来はマップ画像をリサイズさせると座標がズレてしまっていました。以下のプラグインを使うと、マップ画像をリサイズさせても、リンクエリアがズレてしまうことなくクリッカブルマップを実装することができます。
Responsive Image Maps jQuery Plugin
https://github.com/stowball/jQuery-rwdImageMaps
Copyright (c) 2012 Matt Stow
A-1.<head>内でプラグインを読み込みます。
コード①-A ( HTML )
A-2.クリッカブルマップを実装したい位置に以下のHTML(コード①-A) を記述します。
クリッカブルマップにロールオーバーを実装
コード①-B ( HTML )
B-1.各リンクエリアのロールオーバー画像を、マップ画像と同サイズで用意します。
B-2コード①-Aをロールオーバー用にアレンジします(コード①-B)。マップとなる<img>に任意のクラス.areaMap01を与えます(①-B-1)。 <area>タグのdata-src属性の値に、ロールオーバー画像をそれぞれ指定します(①-B-2)。 全体をdivで囲み、任意のクラス.areaMap-Wrap01を与えます(①-B-3)。
コード② ( CSS )
B-3.CSSを記述します(コード②)。マウスオーバー時の画像のちらつきを防ぐため、.areaMapWrap01にマップ画像を背景として読み込みます。
コード③( Javascript )
B-4.JSを記述します(コード③)。 <area>に対し、hover時の動きを記述していきます(③-1)。data-srcに指定された画像パスを.areaMap01のsrc属性と入れ替えることでマウスオーバーさせ、さらにフェードの動きも実装しています。
カーソルが離れたときには、src属性をもとのマップ画像のパスに戻します(③-2)。
