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

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

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

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

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

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

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

<img src="画像ファイル名.gif" usemap="マップ名">

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

<img src="map.gif" usemap="#ImageMap" />

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

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

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

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

<map name="マップ名">
<area shape="座標範囲" coords="座標" href="リンク先ファイル">
</map>

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

<img src="map.gif" usemap="#ImageMap" />
<map name="ImageMap">
<area shape="rect" coords="31,62,73,105" href="https://bahtera.jp/aceh/" />
</map>

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

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

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

<img src="map.gif" usemap="#ImageMap" style="cursor: default;" />
<map name="ImageMap">
<a href="aceh.gif" class="preview" onclick="return false;">
<area shape="rect" coords="31,62,73,105" href="https://bahtera.jp/aceh/" alt="アチェ・ガヨ" />
</a>
</map>

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

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

//関数の定義
this.imagePreview = function(){	
	/* ポップアップが表示される位置 */
		xOffset = 10;
		yOffset = 30;
		
	$("a.preview").hover(function(e){
		this.t = this.title;
　　　　　/* 右端のパプアのポップアップの位置を変更 */
		if(this.t=="ダニ族が住むワメナの山岳地帯"){
			yOffset = -550;
		}else{
			yOffset = 30;
		}
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// トップページが読み込まれるタイミングで関数を実行
$(document).ready(function(){
	imagePreview();
});

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

#preview{
	position: absolute;
	display: none;
}

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//bahtera.jp/jquery.rwdImageMaps.min.js"></script>