以前、プラグインを使わないでjavascriptでレスポンシブ対応のクリッカブル マップを実装する方法を紹介したのですが、少しは需要があるみたいなので、jQueryでプラグインを使わずに実装する方法も紹介しておきたいと思います。
実装概要
今回は、前回の記事を元に実装していくので概要に関しては前回の記事を参照しておいてください。
レスポンシブ対応クリッカブルマップの実装方法
では、早速紹介していきたいと思います。まずは前回同様、完成系のコードから貼っておきます。
完成ソースコード
では、このソースコードを元に実装していく上でのポイントをそれぞれ説明していきます。
ベースとなるcoordsを作成
まず、クリッカブルマップの対象画像のオリジナルサイズをもとにベースとなるcoordsを作成していきます。
coordsの作成に関しては、前回も紹介したこちらのImagemap Generatorというサイトがおすすめです。
下図のように地域に分けてクリッカブルエリアを作成します。
HTMLの作成（可変）
上で作成したパス情報をもとにhtml作成します。HTML部分に関しては前回と同じになります。320〜1280pxの間でサイズが可変します。
これで対象の日本地図が320〜1280pxの間で可変するページができるかと思います。
基礎coordsの配列化
続いて、各areaタグの「coords」の部分を配列化していきます。完成コードのsetBaseCoords関数の部分になります。
ここでは、areaタグの数だけeach関数で回してあげて、カンマ区切りで配列化したものをさらにarray配列に入れて多重配列化しています。
ターゲット画像のオリジナルサイズ取得
次に、クリッカブルマップの対象画像のオリジナルの縦横サイズを取得します。同時に縦横比（アスペクト）も求めておきます。完成コードの41〜49行目部分の処理ですね。
この箇所では、画像をロードして読み込みが完了した時点でオリジンルサイズを取得しアスペクトを求めて、getCoordsという関数を呼び出しています。
getCoords関数は、これから紹介しますが、可変幅に合わせてcoordsの値をリセットする関数になります。
ちなみに、getCoords関数はターゲット画像の読み込みが完了してから実行しないと正確な座標が求められませんので必ず画像の読み込み完了後に実行してください。
coordsをリセット（レスポンシブ対応）
これでとりあえず下準備はOKなので、実際にレスポンシブに対応すべく幅に応じた座標を取得していきます。完成コードのgetCoords関数の箇所になります。
ここの処理では、ターゲット要素の現時点の横幅をtargetWidth変数に代入して、取得した現時点の横幅をオリジナル画像の横幅で割ってX座標の比率（rateX）を求めます。この比率をオリジナルのX座標値に乗算することで、その時点の幅に適応したX座標が求められます。
Y座標に関しては、まずはtargetWidth変数にアスペクトを乗算して、それをオリジナル縦幅で割ることで比率を求めます。そして、その値をY座標の当たる数値に乗算することで求めることができます。
あとは、areaタグの数だけeach関数で繰り返し、基礎となるcoordsの値をX座標とY座標に分けて、処理してあげればそれぞれ適切な座標を求めることができます。
最後に、ウィンドウがリサイズされた時にも対応できるように、リサイズ関数を追加すれば完了です。
まとめ
ということで、今回はjQueryでプラグインを使わないでレスポンシブに対応したクリカッブルマップを作成する方法を紹介しました。
前回は、生のjavascriptで実装する方法を紹介しましたが、jQueryもまだまだ需要があるようなので記事にしておきました。
jQueryだとコードも省略化でき簡潔になり、より分かるやすくなるのではないかと思います。
てことで、今回はここまで！また！