地理的メモ帳: JavaScript（JQuery）でSVGの色を変更する
今回の目標としては、日本地図の指定の位置データを取得することだった。
例えば北海道の上にマウスカーソルを移動させたり、クリックしたりしたときに、なんらかの情報を表示させるのである。
こうすることで、地図の色の塗り分け以上に情報を埋め込むことができるはず。
これを実現する方法として、2パタンが考えられた。
１．それぞれのSVG要素にマウスがクリックされた（もしくはマウスが乗った）イベントのスイッチを入れる。
２．マウスがクリックされた（もしくは移動した）時の真下のSVG要素は何であるかを取得する。
どちらの方法でも、追加情報の表示ができるが、今回は２番を選んだ。
理由としては、１の場合、それぞれのSVG項目へイベント用のコードを埋め込む作業が億劫であるからだ。
では、２を実現するために必要なことはなにか。
①マウスカーソルの移動（もしくはクリック）を検知する。
②マウスカーソル直下の要素を取得する。
以上の２つである。
①のマウスカーソルの移動を検知するためには下記サイトを参考とした。
 | jQuery(JavaScript)でマウス座標やウィンドウサイズを取得して確認するツール | EasyRamble |
②のカーソル直下の要素を取得するには下記サイトを参考とした。
 | jQuery：現在カーソルがhoverしている要素を返す | hacknote |
jQueryの「:hover」を実行すると、マウスカーソルがhoverしている要素をすべて返してくるのだ。
配列として戻っているようで、先頭（0番目）から「HTML」「BODY」……「一番上の要素」となっている。
そのため、配列の最後を取得すれば、目的のID要素が取得できるという寸法である。
ただし、最後の要素が必ずしもIDじゃないときもある。
そのため、IDなのかどうかをIF文で調べ、分岐させている。
その方法はこちらを参考に。
 | jQueryで属性の有無を調べるにはundefinedかどうかを調べる [俺の備忘録] |
結果として、マウスカーソルが移動している時の、カーソル直下の要素IDを取得し、そのID名を表示させることができた。
実物はこちらから。
地理的メモ帳: JSテストページ
左上の「Change Color!」ボタンの下側に日本地図上でのID名が表示される。
例えばHOKKAIDOなど。
ソースコードは下記の通り。
$(".main-outer").mousemove( function(evt) {//main-outerクラス上でマウスの移動を検知
if(typeof $(jQuery(":hover")[jQuery(":hover").length -1]).attr("id") != 'undefined'){
//マウスカーソル直下の要素にIDがあるかどうかを確認
var text = "Name of ID:"+$(jQuery(":hover")[jQuery(":hover").length -1]).attr("id");
//IDがあった場合
}else{
var text = "Name of ID:";//IDが無かった場合
}
$("#text").html(text);//IDを表示させる
});
今後はマウスクリックにより、追加情報を表示できるようにしたい。
以上。