【jQuery】【HTML】画像内の特定の箇所をクリックすると、説明文を動的表示

画像内の特定の箇所をマウスオーバーすると、説明文が表示されるコードのサンプル
areaタグの押下をjQueryで捉え、divタグをoffsetで移動させて動的に文章を表示させます。

---

• 中身空っぽのdivタグを、あらかじめ用意しておきます。
  このとき、display:none;は設定しません。
  これは、下記で挙げるoffset関数による位置変更が、透明な要素に対しては適用されないからです。
  中身空っぽにしておくことで疑似的に透明っぽく見せておきます
• 対象となるimgタグにはmapとareaタグを用意します。
  areaタグ押下をjquery側ではclick関数で拾い、
  上記の「中身空っぽのdiv」に中身を動的に詰め込んで、
  offset関数でareaタグ付近に移動させます。
• 移動の際、areaタグに指定してあるcoords要素（area自身を定義している範囲）から、
  divタグの表示位置を「area自身の右下」にするようoffsetの引数を調整します。
  coodrs属性はカンマ区切りで設定されているので、
  四角形のエリアである場合、「右下」は、2番目と3番目の要素となります。
• area以外の範囲の画像部分をクリックした場合、
  表示している説明文を空っぽにしてリセットさせます。
  こうしないと、表示された説明文が延々残って邪魔なので。

HTMLはこんな↓かんじ

<div id="imagePopup"></div> ←これが「中身空っぽのdiv」
<img src="20180419_test_img.jpg" usemap="#test">
<map name="test">    ↓指定しているareaは２か所
	<area class="img-map-area" id="img01_01" shape="rect" coords="32,28,108,82">
	<area class="img-map-area" id="img01_02" shape="rect" coords="179,15,210,68">
</map>

jQueryはこんな↓かんじ

<script type="text/javascript">
	$(function(){
	
		var textDiv = $("#imagePopup");
		
		// areaタグ押下時に説明文を表示
		$(".img-map-area").hover(function(){
			var elementId = $(this).attr("id");
			// area右下を指定
			var coords = $(this).attr("coords").split(",");
			var dispTop = coords[3];
			var dispLeft = coords[2];
			
			textDiv.text("");
			
			textDiv.css("position","absolute").css("background-color","white").css("font-weight","bold");
			textDiv.offset({top:dispTop, left:dispLeft});
			
			var appendText = "";
			if (elementId == "img01_01") {
				appendText = "信じなくていいよ　そんな悲しいニュースを<br/>燃やしてしまうよ　きれいな火を出して<br/>" ;
			} else {
				appendText = "DANCE IN THE SHADOW THE WYVERN FLYING<br/>IT'S LIKE DFFERENT DEMENSIONAL COLOR<br/>SING IN THE SHADOW THE WYVERN BREATHING<br/>IT'S LIKE DEFERENT DEMENSIONAL SOUND";
			}
			
			textDiv.append(appendText);
			
		});
		
		// area外の画像部分クリック時、説明文をクリア
		$("img").click(function(){
			textDiv.text("");
		});
	
	});
</script>

実演は以下↓

左上の六角形（ID=img_01_01）をクリックしたとき↓

右上の六角形（ID=img_01_02）をクリックしたとき↓