クリッカブルマップでセレクトボタンを選択するようにしたい。

クリッカブルマップでセレクトを選択できるようにしたい。

実装した結果
画像にクリックすると表示ができる。
セレクトボックスを選択すると画像表示ができない。
例）和歌山を選択すると画像に和歌山の地図が出てくる。

実行したい内容

<select>を選択してマップの画像の変化を行いたい。
マップをクリックしたら<select>も併せて変化を行えるようにしたい。

参考サイト

※CSSは割愛させていただきます。

html
1<select name="number">
2<option value="選択してください" selected>選択してください</option>
3<option value"奈良">奈良</option>
4<option value"和歌山">和歌山</option>
5～中略～
6</select>
7
8<figure>
9<img id="kinki-map" src="./img/map.jpg" width="660" height="660" border="0" alt="" usemap="#kinki-map">
10<map name="kinki-map">
11<area onmouseover="changeMapImage('./img/nara.jpg')" onmouseout="changeMapImage('./img/kinki-map.jpg')" shape="rect" alt="奈良" coords="429,45,512,72" href="#">
12<area onmouseover="changeMapImage('./img/wakayama.jpg')" onmouseout="changeMapImage('./img/kinki-map.jpg')" shape="rect" alt="和歌山" coords="500,31,582,46" href="#">
13～中略～
14</map>
15</figure>

javascript
1<script type="text/javascript">
2function changeMapImage(imgPath) {
3	document.getElementById('kink-map').src = imgPath;
4}
5</script>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

どこに参考サイトを探しても出てきません。

ご教示ください。

よろしくお願いします。

int32_t

2022/03/08 09:23

実現したいことは、質問タイトルからクリッカブルマップをクリックするとで<select>の値が相応するものに変わるだけでいいですか? > セレクトボックスを選択すると画像表示ができない。 > 例）和歌山を選択すると画像に和歌山の地図が出てくる。質問タイトルには入っていませんが、これも実現したいですか?

Leon-Lionking

2022/03/08 23:29

説明不足で済みません。 <select>を選択してマップの画像の変化が欲しいです。マップをクリックしたら<select>も併せて変化が欲しいです。説明文に追加しておきました。

int32_t

2022/03/08 23:54

> マップをクリックしたら<select>も併せて変化が欲しいです。ロールオーバー時ではなくクリック時だけですか?

Leon-Lionking

2022/03/09 00:13

ロールオーバーの時でもありです。クリック時の変化でロールオーバーの表示を合わせて動かしたいです。

行動規範の内容に同意します

回答1件

<select>を選択してマップの画像の変化を行いたい。

<select> に change イベントリスナを登録して、その中では、<select> の値 (event.target.value) を判定して対応する changeMapImage(...) を呼びます。
例:

js
1document.querySelector('select[name="number"]').addEventLisetner(
2    'change', event => {
3  switch (event.target.value) {
4  case '選択してください';
5    changeMapImage('./img/kinki-map.jpg');
6    break;
7  case '奈良':
8    changeMapImage(...
9  ...

マップをクリックしたら<select>も併せて変化を行えるようにしたい。

引数に合わせて<select>の値を更新して、かつchageMapImage() を呼ぶ関数を作って、<area> の onmouseover と onmouseout ではその関数を呼びます。
例:

js
1function changeSelectAndMapImage(imgPath) {
2  if (imgPath.endsWith('kinki-map.jpg')) {
3    // <select> の value を '選択してください' にセット
4  } else if (imgPath.endsWith('nara.jpg')) {
5    // <select> の value を '奈良' にセット
6  } else ...
7
8  changeMapImage(imgPath);
9}
10