日本地図の画像に設定したクリッカブルマップをマウスオーバーすると、マウスに追従するツールチップが表示されます。クリッカブルマップはjQueryプラグインのjquery.rwdImageMaps.jsでレスポンシブ対応しています。

東北
- 青森県
- 岩手県
- 宮城県
- 秋田県
- 山形県
- 福島県
関東
- 茨城県
- 栃木県
- 群馬県
- 埼玉県
- 千葉県
- 東京都
- 神奈川県
北陸
- 新潟県
- 富山県
- 石川県
- 福井県
東海
- 長野県
- 山梨県
- 静岡県
- 愛知県
- 岐阜県
- 三重県
近畿
- 滋賀県
- 奈良県
- 京都府
- 大阪府
- 和歌山県
- 兵庫県
中国
- 鳥取県
- 島根県
- 岡山県
- 広島県
- 山口県
四国
- 徳島県
- 香川県
- 愛媛県
- 高知県
九州
- 福岡県
- 佐賀県
- 長崎県
- 熊本県
- 大分県
- 宮崎県
- 鹿児島県
htmlのコードは下記になります。
クリッカブルマップの各地域別のareaタグにclassを、ツールチップの各地域別のdivタグにidを付与します。
<div><img src="images/map.gif" usemap="#ImageMap" alt="日本地図" class="map_link">
<map name="ImageMap">
<area shape="rect" coords="316,32,415,102" href="#">
<area shape="rect" coords="317,109,396,208" href="#" class="area_tohoku">
<area shape="poly" coords="317,209,317,307,338,307,338,284,374,284,374,307,395,307,395,209" href="#" class="area_kanto">
<area shape="rect" coords="231,181,318,231" href="#" class="area_hokuriku">
<area shape="rect" coords="232,230,316,308" href="#" class="area_tokai">
<area shape="rect" coords="181,181,232,314" href="#" class="area_kinki">
<area shape="rect" coords="106,180,182,247" href="#" class="area_chugoku">
<area shape="rect" coords="105,254,174,308" href="#" class="area_shikoku">
<area shape="poly" coords="31,189,31,234,53,234,53,326,97,326,97,189" href="#" class="area_kyusyu">
<area shape="rect" coords="34,347,68,373" href="#" />
</map>
<div id="p_tohoku" class="p_box">
<p class="p_title">東北</p>
<div class="p_txt">
<ul>
<li>青森県</li>
<li>岩手県</li>
<li>宮城県</li>
<li>秋田県</li>
<li>山形県</li>
<li>福島県</li>
</ul>
</div>
</div>
<div id="p_kanto" class="p_box">
<p class="p_title">関東</p>
<div class="p_txt">
<ul>
<li>茨城県</li>
<li>栃木県</li>
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
<li>東京都</li>
<li>神奈川県</li>
</ul>
</div>
</div>
<div id="p_hokuriku" class="p_box">
<p class="p_title">北陸</p>
<div class="p_txt">
<ul>
<li>新潟県</li>
<li>富山県</li>
<li>石川県</li>
<li>福井県</li>
</ul>
</div>
</div>
<div id="p_tokai" class="p_box">
<p class="p_title">東海</p>
<div class="p_txt">
<ul>
<li>長野県</li>
<li>山梨県</li>
<li>静岡県</li>
<li>愛知県</li>
<li>岐阜県</li>
<li>三重県</li>
</ul>
</div>
</div>
<div id="p_kinki" class="p_box">
<p class="p_title">近畿</p>
<div class="p_txt">
<ul>
<li>滋賀県</li>
<li>奈良県</li>
<li>京都府</li>
<li>大阪府</li>
<li>和歌山県</li>
<li>兵庫県</li>
</ul>
</div>
</div>
<div id="p_chugoku" class="p_box">
<p class="p_title">中国</p>
<div class="p_txt">
<ul>
<li>鳥取県</li>
<li>島根県</li>
<li>岡山県</li>
<li>広島県</li>
<li>山口県</li>
</ul>
</div>
</div>
<div id="p_shikoku" class="p_box">
<p class="p_title">四国</p>
<div class="p_txt">
<ul>
<li>徳島県</li>
<li>香川県</li>
<li>愛媛県</li>
<li>高知県</li>
</ul>
</div>
</div>
<div id="p_kyusyu" class="p_box">
<p class="p_title">九州</p>
<div class="p_txt">
<ul>
<li>福岡県</li>
<li>佐賀県</li>
<li>長崎県</li>
<li>熊本県</li>
<li>大分県</li>
<li>宮崎県</li>
<li>鹿児島県</li>
</ul>
</div>
</div>
</div>
続いてCSSのコードです。
ツールチップの各地域別のdivタグは非表示にします。また、ツールチップ共通のclassであるクラス名p_boxにposition: absolute;を設定します。leftとtopはjQueryで指定するためCSSでは設定しません。それ以外はツールチップの装飾です。
#p_tohoku,
#p_kanto,
#p_hokuriku,
#p_tokai,
#p_kinki,
#p_chugoku,
#p_shikoku,
#p_kyusyu {
display: none;
}
.p_box {
width: 200px;
position: absolute;
background: #f7f7f7;
padding: 0 1px;
border-radius: 0 0 10px 10px;
box-shadow: 0px 2px 2px #e6e6e6;
}
.p_box .p_title {
border-top: 2px solid #006cb8;
border-bottom: 1px solid #e6e6e6;
text-align: center;
margin: 0;
line-height: 2.5;
}
.p_box .p_txt {
padding: 15px 5px;
}
.p_box ul {
width: 90%;
margin: 0;
padding: 0 0 0 10%;
overflow: hidden;
}
.p_box ul li {
float: left;
width: 42%;
margin: 0 0 0 8%;
font-size: .8em;
}
最後にjQueryのコードです。
まず各地域別に、クリッカブルマップをマウスオーバーでツールチップを表示・非表示する処理を記述します。
次に日本地図の画像マウスオーバー時に、ツールチップの表示位置を指定する処理を記述します。mousemove内にevent.clientXとevent.clientYを記述することで、ユーザーのマウス移動時のX座標とY座標を取得します。ツールチップがちょうどマウスの右下に追従するように、X座標に5を加算、Y座標に5とスクロール位置を加算します。取得した座標はツールチップ共通のクラス名p_boxのCSS、leftとtopに代入します。マウスが移動するとleftとtopの位置も更新されるため、ツールチップが追従する動きになります。
$(function() {
$('.area_tohoku').hover(function() {
$("#p_tohoku").show();
},function() {
$("#p_tohoku").hide();
});
$('.area_kanto').hover(function() {
$("#p_kanto").show();
},function() {
$("#p_kanto").hide();
});
$('.area_hokuriku').hover(function() {
$("#p_hokuriku").show();
},function() {
$("#p_hokuriku").hide();
});
$('.area_tokai').hover(function() {
$("#p_tokai").show();
},function() {
$("#p_tokai").hide();
});
$('.area_kinki').hover(function() {
$("#p_kinki").show();
},function() {
$("#p_kinki").hide();
});
$('.area_chugoku').hover(function() {
$("#p_chugoku").show();
},function() {
$("#p_chugoku").hide();
});
$('.area_shikoku').hover(function() {
$("#p_shikoku").show();
},function() {
$("#p_shikoku").hide();
});
$('.area_kyusyu').hover(function() {
$("#p_kyusyu").show();
},function() {
$("#p_kyusyu").hide();
});
$('.map_link').hover(function() {
$(window).mousemove(function() {
var mouse_x = event.clientX + 5;
var mouse_y = $(window).scrollTop() + event.clientY + 5;
$(".p_box").css({
"left": mouse_x,
"top": mouse_y
});
});
});
});