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

2020.03.09

Logging

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.webp"></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');
                });
        }
    });
}

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年03月09 04:34日

タグ

358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,

また、こんな所へ行くことになりそうだ。

2015.04.10

Logging

https://twitter.com/zip358com/status/586314412941676544
https://twitter.com/UTAZOME/status/586313992219430912
朝はいつもこんな感じだった・・・・。そういや、そうだったとTwitterのTL（タイムライン）見て思い出しました。こんな所で一年間よく居たものだ。慣れるけど・・・朝からそれなりに混むからね都市は。4月が一番、混んでたように思います。プログラマーが技術のレベルアップしたいと思うなら東京や大阪へ行くと良いと思います、田舎へ戻る頃には挫折するかレベルアップするかどちらかになります。自分は挫折した方でしたけどムフ(´Д｀)。自分はいまそういう人生の岐路の部分に立っていて、やっぱりこの道しか無いのかもなぁとか思ってます。どこかに潜り込む事になりそうな予感がします。ちなみに完璧に自分に自信が付けばクラウドソーシングで食って行きたいとも思っているのです。他の職業はハネられるけどこの分野はハネられないだよね、何故何だか・・・・この道しか無いのかと自分の意志とは相反している複雑な気持ちの今日このごろ。
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2015年04月10 09:11日

タグ

Twitter, クラウドソーシング, タイムライン, どちらか, ハネ, プログラマー, ムフ, 予感, 今日このごろ, 分野, 岐路, 意志, 所, 技術, 田舎, 職業, 自信, 道, 都市,