地理的メモ帳: jQueryでマウスカーソル直下の要素名を取得し続ける
今回は、
１．マウスクリック時に、
２．カーソル直下要素のID名を取得し、
３．マウスカーソル近傍に、
４．都道府県名を表示させる。
以上のものを実装した。
それぞれの参考サイトは下記の通り。
 | jQuery 便利なonを使おう（on click) - Qiita |
あのスマホゲームみたいにクリックした場所が点灯するサンプルつくってみた
 | [CSS] 文字は透過させずにそのまま、背景だけ透明にする方法 - Webworker's Clip |
これによって、日本地図上をクリックした時に、有効範囲（SVGでIDが設定してある範囲）上にカーソルが合った場合、その都道府県名が表示される。
クリック時にイベントが実行されるようにしてあるが、カーソルが乗ったときや止まったときに実行させるなどのカスタマイズは可能だ。
これでクリックによる追加情報の表示ができるようになった。
今回のソースコードは下の通り。
<script>
(function($){
var i;
var w = $('#text').width();
var h = $('#text').height();
var array = [ //Name of Prefecture
"HOPPOURYOUDO",
"HOKKAIDO",
"AOMORI",
"IWATE",
"AKITA",
"YAMAGATA",
"MIYAGI",
"FUKUSHIMA",
"IBARAKI",
"TOCHIGI",
"GUNMA",
"SAITAMA",
"TOKYO",
"TOKYO_ISLANDS",
"KANAGAWA",
"CHIBA",
"YAMANASHI",
"NIIGATA",
"ISHIKAWA",
"HUKUI",
"TOYAMA",
"NAGANO",
"SIZUOKA",
"GIFU",
"AICHI",
"MIE",
"SHIGA",
"WAKAYAMA",
"KYOTO",
"OSAKA",
"HYOGO",
"NARA",
"OKAYAMA",
"TOTTORI",
"HIROSHIMA",
"YAMAGUCHI",
"SHIMANE",
"KAGAWA",
"KOUCHI",
"TOKUSHIMA",
"EHIME",
"FUKUOKA",
"NAGASAKI",
"SAGA",
"KUMAMOTO",
"OOITA",
"MIYAZAKI",
"KAGOSHIMA",
"KAGOSHIMA_ISOLATED_ISLANDS",
"OKINAWA"
];
var name_array ={
"HOPPOURYOUDO":"北海道",
"HOKKAIDO":"北海道",
"AOMORI":"青森県",
"IWATE":"岩手県",
"AKITA":"秋田県",
"YAMAGATA":"山形県",
"MIYAGI":"宮城県",
"FUKUSHIMA":"福島県",
"IBARAKI":"茨城県",
"TOCHIGI":"栃木県",
"GUNMA":"群馬県",
"SAITAMA":"埼玉県",
"TOKYO":"東京都",
"TOKYO_ISLANDS":"東京都",
"KANAGAWA":"神奈川県",
"CHIBA":"千葉県",
"YAMANASHI":"山梨県",
"NIIGATA":"新潟県",
"ISHIKAWA":"石川県",
"HUKUI":"福井県",
"TOYAMA":"富山県",
"NAGANO":"長野県",
"SIZUOKA":"静岡県",
"GIFU":"岐阜県",
"AICHI":"愛知県",
"MIE":"三重県",
"SHIGA":"滋賀県",
"WAKAYAMA":"和歌山県",
"KYOTO":"京都府",
"OSAKA":"大阪府",
"HYOGO":"兵庫県",
"NARA":"奈良県",
"OKAYAMA":"岡山県",
"TOTTORI":"鳥取県",
"HIROSHIMA":"広島県",
"YAMAGUCHI":"山口県",
"SHIMANE":"島根県",
"KAGAWA":"香川県",
"KOUCHI":"高知県",
"TOKUSHIMA":"徳島県",
"EHIME":"愛媛県",
"FUKUOKA":"福岡県",
"NAGASAKI":"長崎県",
"SAGA":"佐賀県",
"KUMAMOTO":"熊本県",
"OOITA":"大分県",
"MIYAZAKI":"宮崎県",
"KAGOSHIMA":"鹿児島県",
"KAGOSHIMA_ISOLATED_ISLANDS":"鹿児島県",
"OKINAWA":"沖縄県"
};
$('#btn-test1').on("click", function() {
for(var i=0;i<50;i++){
$('#'+array[i]).css({ fill: '#'+Math.floor(Math.random()*16777215).toString(16) });
}
});
$(".main-outer").on("click", function(evt) {
if(! $('#text').is(':animated')){
if(typeof $(jQuery(":hover")[jQuery(":hover").length -1]).attr("id") != 'undefined'){
var text = $(jQuery(":hover")[jQuery(":hover").length -1]).attr("id");
$('#text').css("display","none");
var areaOffset = $("#text").parent().offset();
var x = evt.pageX - areaOffset.left;
var y = evt.pageY - areaOffset.top;
$('#text').css({
top: y,
left: x
});
$("#text").html(name_array[text]).fadeIn(200);
}
}
});
}(jQuery));
</script>
以上。
