都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

2020.03.09

jquery, プログラム

JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。

デモ8:: https://zip358.com/tool/demo8/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body onload="ken()">
    <object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
    <a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png"></a><br>
    データ引用元:<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>
{
    "kenmei":[
        {"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
        {"id":"2","ken":"青森県","eiji":"AOMORI"},
        {"id":"3","ken":"岩手県","eiji":"IWATE"},
        {"id":"4","ken":"宮城県","eiji":"MIYAGI"},
        {"id":"5","ken":"秋田県","eiji":"AKITA"},
        {"id":"6","ken":"山形県","eiji":"YAMAGATA"},
        {"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
        {"id":"8","ken":"茨城県","eiji":"IBARAKI"},
        {"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
        {"id":"10","ken":"群馬県","eiji":"GUNMA"},
        {"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
        {"id":"12","ken":"千葉県","eiji":"CHIBA"},
        {"id":"13","ken":"東京都","eiji":"TOKYO"},
        {"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
        {"id":"15","ken":"新潟県","eiji":"NIIGATA"},
        {"id":"16","ken":"富山県","eiji":"TOYAMA"},
        {"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
        {"id":"18","ken":"福井県","eiji":"HUKUI"},
        {"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
        {"id":"20","ken":"長野県","eiji":"NAGANO"},
        {"id":"21","ken":"岐阜県","eiji":"GUFU"},
        {"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
        {"id":"23","ken":"愛知県","eiji":"AICHI"},
        {"id":"24","ken":"三重県","eiji":"MIE"},
        {"id":"25","ken":"滋賀県","eiji":"SHIGA"},
        {"id":"26","ken":"京都府","eiji":"KYOTO"},
        {"id":"27","ken":"大阪府","eiji":"OSAKA"},
        {"id":"28","ken":"兵庫県","eiji":"HYOGO"},
        {"id":"29","ken":"奈良県","eiji":"NARA"},
        {"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
        {"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
        {"id":"32","ken":"島根県","eiji":"SHIMANE"},
        {"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
        {"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
        {"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
        {"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
        {"id":"37","ken":"香川県","eiji":"KAGAWA"},
        {"id":"38","ken":"愛媛県","eiji":"EHIME"},
        {"id":"39","ken":"高知県","eiji":"KOUCHI"},
        {"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
        {"id":"41","ken":"佐賀県","eiji":"SAGA"},
        {"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
        {"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
        {"id":"44","ken":"大分県","eiji":"OOITA"},
        {"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
        {"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
        {"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
        ]
}

function ken() {
    $.getJSON("ken.json", function (json) {
        var svg_ken = document.getElementById('svg_ken').contentDocument;
        var ken = $(svg_ken);
        ken.find('path').attr('fill', '#fff');
        ////
        for (var i = 0; i < 47; i++) {
        ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
            window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
        });
        }
        ////
        for (var i = 0; i < 47; i++) {
            ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
                function () {
                    $(this).attr('fill', '#4080ff');
                },
                function () {
                    $(this).attr('fill', '#fff');
                });
        }
    });
}