RM-BLOG

IT系技術職のおっさんがIT技術とかライブとか日常とか雑多に語るブログです。* 本ブログに書かれている内容は個人の意見・感想であり、特定の組織に属するものではありません。/All opinions are my own.*

【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は2か所
	<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)をクリックしたとき↓

 

20180419_blog_test_01.jpg
右上の六角形(ID=img_01_02)をクリックしたとき↓

 

20180419_blog_test_02.jpg