レスポンシブなイメージマップの作り方 : hover 時の効果も加えるよ

レスポンシブなイメージマップの作り方 : hover 時の効果も加えるよ

イメージマップ(クリッカブルマップ)の実装案件、今から12年前に作成して以来、久しぶりにありました。地図とかイラストマップみたいなナビゲーションは今でも、ケースバイケースで必要とされますね。

でも、レスポンシブなフルードイメージだと、area で指定したリンク領域の座標が画像サイズの変化に対応しないので、ずれていってしまいます。

こんなときは javascript でどうにかするしかないよね、と思ったら、やっぱりjQuery のプラグインがありました。

今回は、面倒なイメージマップの座標指定が簡単にできるWebサービスと、hover 時の効果を簡単に加える方法を併せてご紹介します。

HTML Imagemap Generator でイメージマップを作成する

イメージマップの作成は難しくありませんが、リンク領域の座標指定がとにかく面倒!  12年前は Fireworks で作業した記憶がありますが、今はどうすりゃいいの? というわけで登場するのが HTML Imagemap Generator です。

直感的な操作で、簡単にコードを生成してくれます。楽!

(下の画像をクリックするとアニメGIFを再生します)

HTML Imagemap Generator - dreamseeker

jQuery RWD Image Maps でレスポンシブ対応

イメージマップのリンク領域は、座標をピクセル単位の絶対値で指定します。なので、レスポンシブにサイズが変化するフルードイメージには対応しません。

JavaScript でリサイズ時に画像サイズを取得して、area の座標の値を書き換えるしかなさそうだけど、面倒そう。こんなときは、サクッとjQuery プラグインで対応しちゃいましょう。ご紹介するのは "jQuery RWD Image Maps" です。

導入も簡単。jQuery と一緒に jsファイルを読み込んで、関数を呼び出すだけ。詳しくは Git Hub のページをご参照ください。

Git Hub - jQuery RWD Image Maps

hover エフェクトは js で focus してみる

イメージマップはリンク領域にカーソルを合わせても、ポインタに変わるくらいで、クリッカブルなことが視覚的にわかりにくいです。CSS で :hover擬似クラスのarea 要素にスタイルを適用したいところですが、area 要素にはほとんど何も効きません。そこで今回は、focus 擬似クラスを利用してみます。

area 要素で指定したリンク領域をクリックすると、input 要素のように、その領域がフォーカスされます。カーソルを合わせた時にフォーカスが入るように、jQuery を記述します。それだけで focus 時のデフォルトスタイルが適用されますが、CSS で独自のスタイルを加えてみます。

/* JavaScript (jQuery) */
$(function(){
  $('area').hover(
   function() { $(this).focus(); },
   function() { $(this).blur(); }
  )
});
/* CSS */
area:focus{
  outline: darkorange solid 2.4rem;
}

こうして hover した時の視覚効果を加わえることで、ユーザーにリンクがあることが伝わりやすくなったと思います。

サンプル DEMO

近畿 中部 関東 東北 北海道 中国 四国 九州 沖縄 佐渡島 淡路島 天草諸島

おわりに

イメージマップ自体はお懐かしやな技術ですが、利用場面は今なおあります。必要になったとき、現在の環境に適応したかたちで、さっと対応できるようにしておきたいものです。

今回の記事、自分のためにメモを残す意味が大きいですが、もし誰かの参考になりましたらうれしいです。