画像の特定の座標にカーソルが当たった時にツールチップ

締切済

質問者：secret_mode
質問日時：2015/03/13 17:23
回答数：3件

jqueryでツールチップを探していたのですが、
htmlタグにidやclassを付けて、そこにマウスが当たったらツールチップが表示されるというものならよく見かけるのですが、
300×300の画像があったとして
その画像内のx50x60y20y80の座標の範囲にカーソルが当たった時にツールチップを表示するようにできるようにしたいのですが、可能でしょうか？
ご教示頂けますと幸いです。
宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

参考程度に

No.3

回答者： fujillin
回答日時：2015/03/19 13:10

こんにちは。

他の方の回答にもあるように、イメージマップやtitle属性を利用するのが簡単かつ良策だと思いますが・・・

実際がどのような利用になるのかよくわからないので、いろいろ適当ですが、こんな感じでしょうか？

※イメージマップは利用していませんが、利用した方が
　スクリプトを大幅に簡略化できます。
※表示内容は、とりあえず画像のalt属性の内容を利用。
※表示するツールチップを吹き出し風にするのにCSSで
　細工をしてますが、単にdivで良ければ省略できます。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
img.tooltip{ width:300px; height:300px; }

#tipBox{ position:absolute; }
#_tipBox div {
position: relative; display: inline-block;
padding: 5px 15px; min-width: 60px;
color: #000; text-align: center;
background: #FFA;
}
#_tipBox div:after {
content: ""; position: absolute; display: block;
top: 12px; left: -20px; margin-top: -10px;
width: 0px; height: 0px; border-style: solid;
border-width: 6px 20px 6px 0;
border-color: transparent #FFA transparent transparent;
}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">

$(function(){
var t = $("<div id='_tipBox'></div>").appendTo($("body"))
　　　　.css({ position: "absolute" }).hide();

var tooltip = {
　target : null, offset: null, tip: t,
　enter: function(elm){
　　this.target = elm;
　　this.offset = elm.offset();
　　this.tip.html("<div>" + elm.attr("alt") + "</div>");
　},
　out: function(){ this.target = null; },
　appeal: function(x, y){
　　if(!this.tip.is(":visible"))
　　　this.tip.css({ top:y-10, left:x+25 }).show();
　},
　clear: function(){ this.tip.hide(); }
};

$("img.tooltip").on("mouseout", function(){ tooltip.out(); })　
　.on("mouseover", function(evt){ tooltip.enter($(evt.target)); })
　.on("mousemove",function(evt){
　　if(!tooltip.target) return;
　　var posX = evt.pageX - tooltip.offset.left
　　var posY = evt.pageY - tooltip.offset.top;

　　if(50<posX && posX<60 && 20<posY && posY<80){
　　　tooltip.appeal(evt.pageX, evt.pageY);
　　} else {
　　　tooltip.clear();
　　}
});

});

</script>
</head>
<body>

<div>
<img class="tooltip" src="A.jpg" alt="hogehogetest">
<img class="tooltip" src="B.jpg" alt="fugafugatest">
<img class="tooltip" src="C.jpg" alt="piyopiyotest">
</div>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
とても参考になりました。

通報する

お礼日時：2015/03/22 23:32

No.2

回答者： ORUKA1951
回答日時：2015/03/14 14:22

「」どんなツールチップかわかりませんが・・・。

jqueryに頼る必要はないかと。
jqueryで何がしたいのですか??

基本)
　『その画像内のx50x60y20y80の座標の範囲にカーソルが当たった時に』
　HTMLカテゴリーに質問されていますが、これはデザインの問題なので「Webデザイン・CSS( https://oshiete.goo.ne.jp/category/258 )」のほうが良いでしょう。
　★HTML4.01の勧告(1999)以来、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』は強く言われてきた事です。

　例えば、それがナビゲーションでしたら・・HTMLは次のようになっているはずですね。
　『DIV要素・・は、・・class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　<div class="nav">
　　　<ul>
　　　　<li><a href="/" title="トップへ">TOP</a></li>
　　　　<li><a href="/books" title="著書一覧">著書</a></li>
　　　　<li><a href="/news" title="新着情報">新着情報</a></li>
　　　</ul>
　　</div>
　</div>
　<div class="section">
・・・【以下略】・・・
HTML5なら、構造を示す要素が追加されたので単純に
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<nav>
　　　<ul>
　　　　<li><a href="/" title="トップへ">TOP</a></li>
　　　　<li><a href="/books" title="著書一覧">著書</a></li>
　　　　<li><a href="/news" title="新着情報">新着情報</a></li>
　　　</ul>
　　</nav>
　</header>
　<section>
ここまでがHTMLの作り方。
ここからはプレゼンテーションの指定ですから、スタイルシートで行ないます。

推奨) スタイルシートでプレゼンテーションを指定する。

他の方法) imagemapを使う。
13.6 イメージマップ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　スタイルシートで色々できるようになったので今は使う人少ない。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
とても勉強になりました。
titleを指定した時、カーソルを当てた時に表示速度が遅いため、jqueryが必要かと思いました。
表示速度を早くする方法はありませんでしょうか？
ちなみに株価チャートの画像を作っていて、カーソルを当てると、数値が表示されるようにしたいと考えています。

通報する

お礼日時：2015/03/17 00:56