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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

1回答

425閲覧

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

homel15k

総合スコア19

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/12/21 03:04

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

HTML

1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4<meta charset "UTF-8"> 5 <title>World Map</title> 6 <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 9 10 <script> 11 //現在の日時の表示 12 function clock(){ 13 //現在 14 let now = new Date(); 15 //東京の時間 16 let timeTokyo = now.getTime(); 17 //UTC 18 let UTC = timeTokyo-9*60*60*1000; 19 20 let cities = document.getElementById("city"); 21 let index = cities.selectedIndex; 22 let timezone = cities.options[index].value; 23 //画像の表示 24 if (timezone == -5){ 25 let img = document.getElementById("image"); 26 let html = "<img src = \"USA.png\">"; 27 img.innerHTML = html; 28 } 29 if (timezone == 0){ 30 let img = document.getElementById("image"); 31 let html = "<img src = \"worldmap.png\">"; 32 img.innerHTML = html; 33 } 34 if (timezone == +9){ 35 let img = document.getElementById("image"); 36 let html = "<img src = \"Japan.gif\">"; 37 img.innerHTML = html; 38 } 39 if (timezone == -8){ 40 let img = document.getElementById("image"); 41 let html = "<img src = \"Canada.gif\">"; 42 img.innerHTML = html; 43 } 44 if (timezone == +10){ 45 let img = document.getElementById("image"); 46 let html = "<img src = \"Australia.gif\">"; 47 img.innerHTML = html; 48 } 49 //選択された都市の時間 50 let timecity = UTC + timezone*60*60*1000; 51 52 //表示 53 now = new Date(timecity); 54 55 //時間の取得 56 let hour = now.getHours(); 57 //分の取得 58 let min = now.getMinutes(); 59 //秒の取得 60 let sec = now.getSeconds(); 61 //表示が一桁の時 62 if (hour < 10) hour = "0"+hour; 63 if (sec < 10) sec = "0"+sec; 64 if (min < 10) min = "0"+min; 65 66 let times = document.getElementById("time"); 67 times.innerHTML = hour+":"+min+":"+sec; 68 69 //年の取得 70 let year = now.getFullYear(); 71 //月の取得 72 let month = now.getMonth()+1; 73 //日の取得 74 let day = now.getDate(); 75 //曜日の名称の変更 76 let weekName = ["San","Mon","Tue","Wed","Thu","Fri","Sat"]; 77 //曜日の取得 78 let week = weekName[now.getDay()]; 79 let dates = document.getElementById("date"); 80 81 dates.innerHTML = year +"/"+month +"/"+day+" "+"("+week+")"; 82 83 //タイマー 84 setTimeout("clock()",1000); 85 } 86</script> 87</head> 88<body onLoad = "clock()"> 89 <div id = "clock"> 90 <h1>THE WORLD CLOCK</h1> 91 <select id = "city"> 92 <option value="0">--- Select city ---</option> 93 <option value = "-5">NewYork(USA) 94 <option value = "+9">Tokyo(Japan) 95 <option value = "-8">Vancouver(Canada) 96 <option value = "+10">Sydney(Australia) 97 <option value = "+8">Beijing(China) 98 <option value = "5.5">Delhi(India) 99 <option value = "+3">Riyadh(Saudi Arabia) 100 <option value = "+0">Rondon(England) 101 </select> 102 <!-- クリッカブルマップ --> 103 <div id = "image"> 104 <img src="world.png" usemap="#ImageMap" alt="" /> 105 <map name="ImageMap"> 106 <area shape="circle" coords="491,293,3" href="" alt="" /> 107 <area shape="circle" coords="517,491,5" href="#" alt="" /> 108 <area shape="circle" coords="714,241,6" href="#" alt="" /> 109 <area shape="circle" coords="844,275,6" href="#" alt="" /> 110 </map> 111 </div> 112 <div id = "date"> 113 </div> 114 <div id = "time"> 115 </div> 116</body> 117</html> 118

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2017/12/22 20:01

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問