jQueryプラグインのjquery.rwdImageMaps.jsを利用します。日本地図の画像に設定したクリッカブルマップをレスポンシブに対応させます。
htmlのコードは下記になります。
クリッカブルマップの記述は通常通りです。areaタグのtitle属性に対象の地域を記述し、マウスオーバー時のツールチップにしています。
<div><img src="map.gif" usemap="#ImageMap" alt="日本地図">
<map name="ImageMap">
<area shape="rect" coords="316,32,415,102" href="#" title="北海道">
<area shape="rect" coords="317,109,396,208" href="#" title="東北">
<area shape="poly" coords="317,209,317,307,338,307,338,284,374,284,374,307,395,307,395,209" href="#" title="関東">
<area shape="rect" coords="231,181,318,231" href="#" title="北陸">
<area shape="rect" coords="232,230,316,308" href="#" title="東海">
<area shape="rect" coords="181,181,232,314" href="#" title="近畿">
<area shape="rect" coords="106,180,182,247" href="#" title="中国">
<area shape="rect" coords="105,254,174,308" href="#" title="四国">
<area shape="poly" coords="31,189,31,234,53,234,53,326,97,326,97,189" href="#" title="九州">
<area shape="rect" coords="34,347,68,373" href="#" title="沖縄">
</map>
</div>続いてjsファイル読み込み部分のコードです。
imgタグにusemap属性のある全ての画像が対象になります。
<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.js"></script>
<script>
$(function() {
$('img[usemap]').rwdImageMaps();
});
</script>