レスポンシブなクリッカブルマップ上でマウスオーバー時にポップアップを表示

インドネシアのコーヒー栽培地のクリッカブルマップを作る

インドネシアのシングルオリジン(生産地の農場単位)コーヒーを美味しく飲むためには、有名どころのカフェに行くか厳選された豆を買って自分で淹れるかになるわけですが、もっと楽しく飲むために風味の傾向とそれを生み出す産地特有の風土や歴史などの基本情報を、地図上からクリック一つで参照できるようなクリッカブルマップを設置しました。

クリッカブルマップ – インドネシアのコーヒー栽培地

  1. クリックで産地の説明ページにジャンプ
    ⇒HTML4.0のクリッカブルイメージマップ
  2. マウスオーバーでポップアップ表示
    ⇒JavaScriptで対応
  3. レスポンシブサイトで可変サイズの画像のリンクエリアがずれないようにする
    ⇒jQUeryプラグイン「jQuery RWD Image Maps」

クリッカブルマップはスマホ表示では意味がありませんので、PC表示時のみトップページの「インドネシアのコーヒー産地マップ」で表示させています。

地図の表示:img要素のsrc属性とusemap属性

普通にimg要素のsrc属性で地図の画像ファイルを指定し、のちにmap要素のname属性で指定する名前をusemap属性で指定します。

マップ名「ImageMap」に「#」をつけると「地図画像からリンクさせない」ことになります。

map要素とarea要素で地図の座標範囲をクリックするとURLに飛ぶ

map要素のname属性で先にimg要素のusemap属性で指定したマップ名を指定することで、src属性で指定した画像ファイルがmapとして使用されることを定義します。

あとはarea要素でマップの画像ファイル上のcoords属性の座標をクリックするとhref属性のリンク先にジャンプすることを定義します。

shape属性にはクリック座標範囲の形を指定し、円(circle)・長方形(rect=rectangle)・多角形(polygon)が指定できますが、今回は長方形を指定し、coords属性で左上と右下の二点の座標を定義します。

座標指定はAdobe FireworksなどWEBデザイン用画像作成ツールで簡単にできますが、HTML Imagemap Generatorというサイトでオンライン上に画像ファイルをアップすることにより座標を取得できます。

マウスオーバーでポップアップ表示

ここまでで地図上の座標範囲をクリックすると指定のURLにジャンプするクリッカブルマップが作成できましたが、マウスオーバー時に産地の写真とコーヒーの風味の傾向をポップアップするために、area属性をa要素(アンカーリンク)で囲み、class属性にpreviewを指定し、href属性にポップアップ用の画像ファイルのURLを指定します。

またimg要素でマップ名「ImageMap」に「#」をつけて「地図画像からリンクさせない」ことにしてはいるものの、カーソルの形が変化してしまうため、cursorセレクタの値にdefaultを設定することでカーソルの形を地図上の座標範囲以外の場所ではデフォルトのままキープします。

ただしこのままではアンカーリンクでarea要素を囲っているため、地図上の座標範囲をクリックするとアンカーリンク要素のhref属性がarea要素のhref属性に勝ってしまい画像ファイルのURLにジャンプしてしまいますので、アンカーリンク要素にonclick属性をつけて「return false;」でアンカーリンクのhref属性を無視するようにします。

トップページがロードされるタイミングで以下のJavaScript関数を実行します。

スタイルシートのpreviewセレクタのposition属性はabsolute、display属性はnoneを指定します。

レスポンシブ画像のリンク座標範囲がずれないようにする

レスポンシブな画像でクリッカブルマップに対応するには座標が可変である必要がありますが、動的にクリッカブルマップの座標を計算しなおすjQueryのプラグインrwdImageMapsを使いましたが、jQueryプラグインなので事前にjqueryを読み込んでおく必要があります。

こんな投稿も読まれています