地理的メモ帳: JavaScript(JQuery)でSVGの色を変更する
今回の目標としては、日本地図の指定の位置データを取得することだった。
例えば北海道の上にマウスカーソルを移動させたり、クリックしたりしたときに、なんらかの情報を表示させるのである。
こうすることで、地図の色の塗り分け以上に情報を埋め込むことができるはず。
これを実現する方法として、2パタンが考えられた。
1.それぞれのSVG要素にマウスがクリックされた(もしくはマウスが乗った)イベントのスイッチを入れる。
2.マウスがクリックされた(もしくは移動した)時の真下のSVG要素は何であるかを取得する。
どちらの方法でも、追加情報の表示ができるが、今回は2番を選んだ。
理由としては、1の場合、それぞれのSVG項目へイベント用のコードを埋め込む作業が億劫であるからだ。
では、2を実現するために必要なことはなにか。
①マウスカーソルの移動(もしくはクリック)を検知する。
②マウスカーソル直下の要素を取得する。
以上の2つである。
①のマウスカーソルの移動を検知するためには下記サイトを参考とした。
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を表示させる });
今後はマウスクリックにより、追加情報を表示できるようにしたい。
以上。