今年の四月からスマホを使い始めました。スマホで我がホームページを覗くと、制作者の意図とは一寸違った見え方ですが何とか見ることが出来ます。Wordpressを使っているのでディスプレイサイズに対応してフレキシブルに表示が変わります。
ディスプレイの幅が狭いので、テキスト部分は行数が増え、画像はディスプレイの幅に合わせて縮小されて表示されます。見難いですが一応情報は伝わるので我慢しています。ところが、最近、イメージマップを使ったページがうまく動作しないことに気がつきました。
イメージマップと言うのは「１つの画像の中に複数のリンク先を設定する」機能です。上の画像では、赤枠で示したエリア（アムステルダム、ロンドン、スイス、ユングフラウ、モンブラン）にリンクが貼られています。これをクリックすると当該ページにジャンプします。
イメージマップの座標はオリジナルの画像サイズで作成されるので、画像が縮小されると位置がズレてしまいます。そのため赤枠部分をクリックしても反応しません。昔の職場の I 氏がiPadではうまく見えないと言っていたのはこのことが原因だったかもしれません。
この現象は、我がホームページが WordPress を使ったレスポンシブサイトであることが原因です。対処方法をネットで調べたところ、幾つか載っていました。多少の違いがありますが、どれも行き着く先は一緒で JQuery のプラグインを使っています。
早速、必要なファイルをダウンロードしてサーバーにアップ。前述のサイトに載せられていた実装例を参考に Script を記述して試してみましたが、期待したようには動作しません。暫くWordpress から離れていたので実装方法にミスがあるのかもしれません。
Web 上を彷徨っていたら「Responsive Image Maps」と言うWordpress 用のプラグインがありました。管理画面には「お使いのバージョンの WordPress ではテストされていません」と表示されますが、それには目を瞑ってインストールしてみました。
縮小された画像ではイメージマップ（上の画像の赤枠部分）はよく見えませんが、ピンチアウトして少し拡大すれば何とか見えます。画像の表示サイズが変わっても、プラグインのお陰で座標が再計算されてズレが無くなっています。ヤレヤレ成功です。
