javascript画像クリック時のアクションについて

Question

前提・実現したいこと

Webサイトで画像に座標を付け、座標によって説明文を表示する方法を教えて下さい。
例えば、次の画像の肩の部分をクリックすると肩についての説明文を表示する方法です。

Comments

[papinianus]

どこまでプログラムで書くつもりですか？画像はuploadされたものをその場で処理するのですか？

[akihiro3]

座標の出し方は分かりますか？文章の表示方法は分かりますか？クリックイベントの方法は分かりますか？

[m.ts10806]

座標は元々持っているので「つける」というのは違いますよ。

Answer 1

少しローカルなやり方

• イメージマップ

座標は元々あるのできちんと選びたい場所を選べるように頑張ってマッピングしてくださいね（座標同士を結ぶので多角形可能です）

Comments

[papinianus]

やりたいのはこれだと思ったんですが、これをプログラムで生成するのってハードル高いと思いました。

[m.ts10806]

自動認識とかはできないので、画像毎に手動でやるしかないかなと。（なので「ローカルなやり方」）
確かに別コメントで書かれている通りこの画像がどう来るのか分からないですよね。
質問内容には特に何も書いていないので「単に決まりきった画像が置かれた状態を前提」とした回答にしました。

Answer 2

HTML内に（インラインで）直接SVGタグで部位（肩とか腕とか）ごとの画像を表示し、
そのSVGタグをクリックした際に説明を表示するscriptを埋め込んでみてはどうでしょうか。

Answer 3

↓参考までに（動くかわかりませんが）

<div id="image_wrapper">
  <div id="shoulder" style="opacity:0;">肩についての説明です</div>
  <img src="./to_image_path"/>
</div>

Javascript

$("#shoulder").click(function(){
  $("shoulder").css("opacity","1");
})