質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.05%

  • JavaScript

    13271questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7226questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

クリッカブルマップ セレクトボックス選択

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 88

homel15k

score 11

こんにちは。JS初心者です。
簡単な世界の時計アプリを作成していて、セレクトボックスから都市名を検索するとその都市の時刻が表示されるというアプリケーションを作成しています。セレクトボックスだけではなく、クリッカブルマップを作り黒い丸をクリックすると同じように時刻が表示されるというものを作りたいのですが、どのように作ればいいのかよくわかりませんでした。
どのように作成すればいいでしょうか?

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset  "UTF-8">
    <title>World Map</title>
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <script>
  //現在の日時の表示
  function clock(){
    //現在
    let now = new Date();
        //東京の時間
        let timeTokyo = now.getTime();
        //UTC
        let UTC = timeTokyo-9*60*60*1000;

        let cities = document.getElementById("city");
        let index = cities.selectedIndex;
        let timezone = cities.options[index].value;
        //画像の表示
        if (timezone == -5){
            let img = document.getElementById("image");
            let html = "<img src  = \"USA.png\">";
            img.innerHTML = html;
        }
        if (timezone == 0){
            let img = document.getElementById("image");
            let html = "<img src  = \"worldmap.png\">";
            img.innerHTML = html;
        }
        if (timezone == +9){
            let img = document.getElementById("image");
            let html = "<img src  = \"Japan.gif\">";
            img.innerHTML = html;
        }
        if (timezone == -8){
            let img = document.getElementById("image");
            let html = "<img src  = \"Canada.gif\">";
            img.innerHTML = html;
        }
        if (timezone == +10){
            let img = document.getElementById("image");
            let html = "<img src  = \"Australia.gif\">";
            img.innerHTML = html;
        }
        //選択された都市の時間
        let timecity = UTC + timezone*60*60*1000;

        //表示
        now = new Date(timecity);

    //時間の取得
    let hour = now.getHours();
    //分の取得
    let min = now.getMinutes();
    //秒の取得
    let sec = now.getSeconds();
        //表示が一桁の時
        if (hour < 10) hour = "0"+hour;
        if (sec < 10) sec = "0"+sec;
        if (min < 10) min = "0"+min;

    let times = document.getElementById("time");
    times.innerHTML = hour+":"+min+":"+sec;

        //年の取得
        let year = now.getFullYear();
        //月の取得
        let month = now.getMonth()+1;
        //日の取得
        let day = now.getDate();
        //曜日の名称の変更
        let weekName = ["San","Mon","Tue","Wed","Thu","Fri","Sat"];
        //曜日の取得
        let week = weekName[now.getDay()];
    let dates = document.getElementById("date");

        dates.innerHTML = year +"/"+month +"/"+day+" "+"("+week+")";

    //タイマー
   setTimeout("clock()",1000);
  }
</script>
</head>
<body onLoad = "clock()">
  <div id = "clock">
        <h1>THE WORLD CLOCK</h1>
        <select id = "city">
            <option value="0">--- Select city ---</option>
            <option value = "-5">NewYork(USA)
            <option value = "+9">Tokyo(Japan)
            <option value = "-8">Vancouver(Canada)
            <option value = "+10">Sydney(Australia)
            <option value = "+8">Beijing(China)
            <option value = "5.5">Delhi(India)
            <option value = "+3">Riyadh(Saudi Arabia)
            <option value = "+0">Rondon(England)
        </select>
        <!-- クリッカブルマップ -->
        <div id = "image">
            <img src="world.png" usemap="#ImageMap" alt="" />
            <map name="ImageMap">
          <area shape="circle" coords="491,293,3" href="" alt="" />
          <area shape="circle" coords="517,491,5" href="#" alt="" />
          <area shape="circle" coords="714,241,6" href="#" alt="" />
          <area shape="circle" coords="844,275,6" href="#" alt="" />
        </map>
        </div>
        <div id = "date">
    </div>
        <div id = "time">
    </div>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

どのように作成すればいいでしょうか? 

  1. area要素のクリックイベントを採れるか調べる
  2. 採れるならそのイベント時にselectの選択を変える

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13271questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7226questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。