画像の切り替えとの連動について

Question

下記についてのやり方が分かりませんでしたので質問させていただきます。

■やりたいこと

添付の画像のように画像上の特定の位置のアイコンをクリックで画像の切り替えと
下のエリア部分の切り替えを行いたい。

イメージマップ等を使うのだろうなというのはわかるのですが、具体的にどう書けばいいのかわかりませんでしたので、
質問させた頂きました。

よろしくお願いいたします。

Answer 1

こういうのを使ってみてはいかがでしょうか。

使い方：
HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法

Answer 2

<map name="primary">
  <area shape="circle" coords="75,75,75" alt="f" data-src="https://placehold.jp/350x150.png?text=f" />
  <area shape="circle" coords="275,75,75" alt="i" data-src="https://placehold.jp/350x150.png?text=i" />
</map>
<img usemap="#primary" src="https://placehold.jp/350x150.png?text=f" alt="350x150" />

$(document).on('click', 'area', function(event) {
  event.preventDefault();
  const area = $(this);
  $('img[usemap="#primary"]').prop('src', area.attr('data-src'));

  // 以下、クリックしたarea要素で分岐。
});

https://developer.mozilla.org/ja/docs/Web/HTML/Element/map

Comments

[dw_sasaki]

ご回答ありがとうございました。
頂きました方法とaddClassの応用で理想の動きを出すことが出来ました。

教えていただきありがとうございましたまた機会がございましたらよろしくお願いいたします。