【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");  
	  
	<span style="color: green;">// areaタグ押下時に説明文を表示</span>  
	$(".img-map-area").hover(function(){  
		var elementId = $(this).attr("id");  
		<span style="color: green;">// area右下を指定</span>  
		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 = "信じなくていいよ　そんな悲しいニュースを&lt;br/&gt;燃やしてしまうよ　きれいな火を出して&lt;br/&gt;" ;  
		} else {  
			appendText = "DANCE IN THE SHADOW THE WYVERN FLYING&lt;br/&gt;IT'S LIKE DFFERENT DEMENSIONAL COLOR&lt;br/&gt;SING IN THE SHADOW THE WYVERN BREATHING&lt;br/&gt;IT'S LIKE DEFERENT DEMENSIONAL SOUND";  
		}  
		  
		textDiv.append(appendText);  
		  
	});  
	  
	<span style="color: green;">// area外の画像部分クリック時、説明文をクリア</span>  
	$("img").click(function(){  
		textDiv.text("");  
	});  
  
});  

</script>

実演は以下↓

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

 

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

 

---