// 県名ボタン画像の幅 var button_width = 48; // クリックしたときに出現するポップアップの位置 var popup_on_map_x = 20; // 地図をクリックしたときにマウスカーソルからどれだけ右に離れて表示されるか var popup_on_map_y = -20; // 地図をクリックしたときにマウスカーソルからどれだけ下に離れて表示されるか var popup_on_button_x = 4; // ボタンをクリックしたときにボタン画像の右上からどれだけ右に離れて表示されるか var popup_on_button_y = -3; // ボタンをクリックしたときにボタン画像の右上からどれだけ下に離れて表示されるか // 検索先URLと共通検索パラメータ 都道府県番号などはさらに下の都道府県データで設定する。 var search_url_addr = "/area/"; var addr_search_default_param = ""; var search_url_station = "/line/"; var station_search_default_param = "/station/"; var search_url_job = "/job/"; var job_search_default_param = ""; var search_url_feature = "/feature/"; var feature_search_default_param = ""; //都道府県別URL add end 2009/11/13 var area_kanto = "/kanto"; var area_tokai = "/tokai"; var area_kansai = "/kansai"; var area_tohoku = "/tohoku"; var area_hokuriku = "/hokuriku"; var area_chugoku = "/chugoku"; var area_kyusyu = "/kyusyu"; /* * 都道府県データ。 * ID名,都道府県名,ボタン画像の左上y座標,検索パラメータの4つを入力。 * "ID名" : { "pref" : "都道府県名" , "height" : "ボタン画像の左上y座標" , "params" : "検索パラメータ" }, * * ID名はmap_***で、areaタグのIDと一致させる。さらに***を件名ボタンのliタグのclassと一致させる。 * /img/map/map_***.gif にマップ画像を格納しておく。 * 検索パラメータはkey1=value1&key2=value2&･･･の形式で。 */ var map_data_s = { //tohoku "map_hokkaido" : { "pref" : "北海道", "height" : "0", "params" : area_tohoku, "pref_id" : 1 }, "map_aomori" : { "pref" : "青森県", "height" : "20", "params" : area_tohoku, "pref_id" : 2 }, "map_iwate" : { "pref" : "岩手県", "height" : "40", "params" : area_tohoku, "pref_id" : 3 }, "map_miyagi" : { "pref" : "宮城県", "height" : "60", "params" : area_tohoku, "pref_id" : 4 }, "map_akita" : { "pref" : "秋田県", "height" : "80", "params" : area_tohoku, "pref_id" : 5 }, "map_yamagata" : { "pref" : "山形県", "height" : "100", "params" : area_tohoku, "pref_id" : 6 }, "map_fukushima" : { "pref" : "福島県", "height" : "120", "params" : area_tohoku, "pref_id" : 7 }, //kanto "map_ibaraki" : { "pref" : "茨城県", "height" : "140", "params" : area_kanto, "pref_id" : 12 }, "map_tochigi" : { "pref" : "栃木県", "height" : "160", "params" : area_kanto, "pref_id" : 13 }, "map_gunma" : { "pref" : "群馬県", "height" : "180", "params" : area_kanto, "pref_id" : 14 }, "map_saitama" : { "pref" : "埼玉県", "height" : "200", "params" : area_kanto, "pref_id" : 10 }, "map_chiba" : { "pref" : "千葉県", "height" : "220", "params" : area_kanto, "pref_id" : 11 }, "map_tokyo" : { "pref" : "東京都", "height" : "240", "params" : area_kanto, "pref_id" : 8 }, "map_kanagawa" : { "pref" : "神奈川県", "height" : "260", "params" : area_kanto, "pref_id" : 9 }, //hokuriku "map_niigata" : { "pref" : "新潟県", "height" : "280", "params" : area_hokuriku, "pref_id" : 16 }, "map_toyama" : { "pref" : "富山県", "height" : "300", "params" : area_hokuriku, "pref_id" : 18 }, "map_ishikawa" : { "pref" : "石川県", "height" : "320", "params" : area_hokuriku, "pref_id" : 19 }, "map_fukui" : { "pref" : "福井県", "height" : "340", "params" : area_hokuriku, "pref_id" : 20 }, "map_yamanashi" : { "pref" : "山梨県", "height" : "360", "params" : area_hokuriku, "pref_id" : 15 }, "map_nagano" : { "pref" : "長野県", "height" : "380", "params" : area_hokuriku, "pref_id" : 17 }, //tokai "map_gifu" : { "pref" : "岐阜県", "height" : "400", "params" : area_tokai, "pref_id" : 22 }, "map_shizuoka" : { "pref" : "静岡県", "height" : "420", "params" : area_tokai, "pref_id" : 23 }, "map_aichi" : { "pref" : "愛知県", "height" : "440", "params" : area_tokai, "pref_id" : 21 }, "map_mie" : { "pref" : "三重県", "height" : "460", "params" : area_tokai, "pref_id" : 24 }, //kansai "map_shiga" : { "pref" : "滋賀県", "height" : "480", "params" : area_kansai, "pref_id" : 28 }, "map_kyoto" : { "pref" : "京都府", "height" : "500", "params" : area_kansai, "pref_id" : 27 }, "map_osaka" : { "pref" : "大阪府", "height" : "520", "params" : area_kansai, "pref_id" : 25 }, "map_hyogo" : { "pref" : "兵庫県", "height" : "540", "params" : area_kansai, "pref_id" : 26 }, "map_nara" : { "pref" : "奈良県", "height" : "560", "params" : area_kansai, "pref_id" : 29 }, "map_wakayama" : { "pref" : "和歌山県", "height" : "580", "params" : area_kansai, "pref_id" : 30 }, //chugoku "map_tottori" : { "pref" : "鳥取県", "height" : "600", "params" : area_chugoku, "pref_id" : 31 }, "map_shimane" : { "pref" : "島根県", "height" : "620", "params" : area_chugoku, "pref_id" : 32 }, "map_okayama" : { "pref" : "岡山県", "height" : "640", "params" : area_chugoku, "pref_id" : 33 }, "map_hiroshima" : { "pref" : "広島県", "height" : "660", "params" : area_chugoku, "pref_id" : 34 }, "map_yamaguchi" : { "pref" : "山口県", "height" : "680", "params" : area_chugoku, "pref_id" : 35 }, "map_tokushima" : { "pref" : "徳島県", "height" : "700", "params" : area_chugoku, "pref_id" : 36 }, "map_kagawa" : { "pref" : "香川県", "height" : "720", "params" : area_chugoku, "pref_id" : 37 }, "map_ehime" : { "pref" : "愛媛県", "height" : "740", "params" : area_chugoku, "pref_id" : 38 }, "map_kohchi" : { "pref" : "高知県", "height" : "760", "params" : area_chugoku, "pref_id" : 39 }, //cyusyu "map_fukuoka" : { "pref" : "福岡県", "height" : "780", "params" : area_kyusyu, "pref_id" : 40 }, "map_saga" : { "pref" : "佐賀県", "height" : "800", "params" : area_kyusyu, "pref_id" : 41 }, "map_nagasaki" : { "pref" : "長崎県", "height" : "820", "params" : area_kyusyu, "pref_id" : 42 }, "map_kumamoto" : { "pref" : "熊本県", "height" : "840", "params" : area_kyusyu, "pref_id" : 43 }, "map_ohita" : { "pref" : "大分県", "height" : "860", "params" : area_kyusyu, "pref_id" : 44 }, "map_miyazaki" : { "pref" : "宮崎県", "height" : "880", "params" : area_kyusyu, "pref_id" : 45 }, "map_kagoshima" : { "pref" : "鹿児島県", "height" : "900", "params" : area_kyusyu, "pref_id" : 46 }, "map_okinawa" : { "pref" : "沖縄県", "height" : "920", "params" : area_kyusyu, "pref_id" : 47 } }; // 初期化 Event.observe(window,"load",init); function init(){ // すべてのマップIDにマウスーバー、マウスアウト、クリックイベントを登録 for(var id in map_data_s){ Event.observe($(id),"mouseover",OnMouseOverMap); Event.observe($(id),"mouseout",OnMouseOutMap); Event.observe($(id),"click",OnClickMap); pref = id.replace(/^map_(.+)$/,"$1"); e_s = $$("#map li."+pref+" a"); // 都道府県名ボタンにもマウスーバー、マウスアウト、クリックイベントを登録 if(e_s[0]){ Event.observe(e_s[0],"mouseover",OnMouseOverPrefButton); Event.observe(e_s[0],"mouseout",OnMouseOutPrefButton); Event.observe(e_s[0],"click",OnClickPrefButton); } } // 閉じるボタンが押されたときのイベントを登録 Event.observe($("map_popup_close"),"click",OnClickMapPopupClose); Event.observe($("search_addr"),"click",OnClickSearchByAddr); Event.observe($("search_station"),"click",OnClickSearchByStation); Event.observe($("search_job"),"click",OnClickSearchByJob); Event.observe($("search_feature"),"click",OnClickSearchByFeature); } //id(map_***) → 都道府県名 function getPrefNameByID(id){ for(var id_tmp in map_data_s){ if(id == id_tmp){ return map_data_s[id]["pref"]; } } } // 都道府県名 → id(map_***) function getIDByPrefName(PrefName){ for(var id in map_data_s){ if(PrefName == map_data_s[id]["pref"]){ return id; } } } // 地図上マウスオーバーイベント function OnMouseOverMap(e){ focusPref(Event.element(e).id); } // 地図上マウスアウトイベント function OnMouseOutMap(e){ blurPref(Event.element(e).id); } // ボタンマウスオーバーイベント function OnMouseOverPrefButton(e){ focusPref(getIDByPrefName(Event.element(e).previousSibling.data)); } // ボタンマウスアウトイベント function OnMouseOutPrefButton(e){ blurPref(getIDByPrefName(Event.element(e).previousSibling.data)); } // 地図クリックイベント function OnClickMap(e){ id = Event.element(e).id; // クリック位置の取得 if(e.layerX){ x = e.layerX; y = e.layerY; } else { x = e.offsetX; y = e.offsetY; } // マウスカーソル付近にポップアップ表示 x += popup_on_map_x; y += popup_on_map_y; showPopup(x,y,id); } // ボタンクリックイベント function OnClickPrefButton(e){ // クリックされた要素からidと座標を取得 id = getIDByPrefName(Event.element(e).previousSibling.data); pref = id.replace(/^map_(.+)$/,"$1"); var e_s = $$("#map li."+pref); // #実はEvent.element(e)をそのまま使えたかも？ // ボタン付近にポップアップ表示 x = e_s[0].offsetLeft + button_width + popup_on_button_x; y = e_s[0].offsetTop + popup_on_button_y; showPopup(x,y,id); } var selected_id = null; // 閉じるボタンクリックイベント function OnClickMapPopupClose(e){ //ポップアップ非表示 $("map_popup").style.display = "none"; selected_id = null; } // 都道府県名と対応する地図上の場所を光らせる function focusPref(id){ // 地図画像を切り替えて光っているように見せる。 $("japan_map_image").src = "/img/front/map/" + id + ".png"; pref = id.replace(/^map_(.+)$/,"$1"); var e_s = $$("#map li."+pref+" a span"); e_s[0].style.backgroundPosition = "-" + button_width + "px -" + map_data_s[id]["height"] + "px"; } // 光っていた部分を元に戻す function blurPref(id){ $("japan_map_image").src = "/img/front/map/map.png"; pref = id.replace(/^map_(.+)$/,"$1"); var e_s = $$("#map li."+pref+" a span"); e_s[0].style.backgroundPosition = "0px -" + map_data_s[id]["height"] + "px"; } // ポップアップの表示 function showPopup(x,y,id){ if($("pref_name")){ $("pref_name").innerHTML = map_data_s[id]["pref"]; } $("map_popup").style.top = y + "px"; $("map_popup").style.left = x + "px"; $("map_popup").style.display = "block"; selected_id = id; } function OnClickSearchByAddr(e){ if(selected_id){ location.href = map_data_s[id]["params"] + search_url_addr + map_data_s[id]["pref_id"] + ".htm"; } } function OnClickSearchByStation(e){ if(selected_id){ //location.href = search_url_station + "?" + station_search_default_param + "&" + map_data_s[id]["params"]; location.href = map_data_s[id]["params"] + search_url_station + map_data_s[id]["pref_id"] + ".htm"; } } function OnClickSearchByJob(e){ if(selected_id){ //location.href = search_url_job + "?" + job_search_default_param + "&" + map_data_s[id]["params"]; location.href = map_data_s[id]["params"] + search_url_job + map_data_s[id]["pref_id"] + ".htm"; } } function OnClickSearchByFeature(e){ if(selected_id){ //location.href = search_url_feature + "?" + feature_search_default_param + "&" + map_data_s[id]["params"]; location.href = map_data_s[id]["params"] + search_url_feature + map_data_s[id]["pref_id"] + ".htm"; } }