A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちは。
他の方の回答にもあるように、イメージマップや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>
No.2
- 回答日時:
「」どんなツールチップかわかりませんが・・・。
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 … )
スタイルシートで色々できるようになったので今は使う人少ない。
回答ありがとうございます。
とても勉強になりました。
titleを指定した時、カーソルを当てた時に表示速度が遅いため、jqueryが必要かと思いました。
表示速度を早くする方法はありませんでしょうか?
ちなみに株価チャートの画像を作っていて、カーソルを当てると、数値が表示されるようにしたいと考えています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッターの下に隙間ができてしまう
-
フッター上部に謎の隙間
-
チェックボックスの背景色って...
-
MAX関数を使ってからLEFT JOIN...
-
背景色を透明化
-
複数画像のランダム複数表示(...
-
変数内容をHTML内で表示する方法
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
jquery中のmatch関数が正常に動...
-
ネストされたチェックボックス...
-
JavaScriptでの画像切り替えを...
-
jqueryのsortableで一部ソート...
-
1枚の画像をクリックして複数の...
-
c++std::string型をTCHARに変換...
-
【jQuery】hoverしたn秒後にイ...
-
画像ファイルの合成
-
removeEventListenerについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
オンマウス時に別画像を上に重...
-
CSS <div>の入れ子が反映さ...
-
文字を固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
テーブルの1つのセル内で、上揃...
-
CSS のみのタブ切り替えについて
-
フッターの下に隙間ができてしまう
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
スマートフォンで適切に見られ...
-
floatさせたdivタグを折り返さ...
-
オープニングにアニメーション...
-
html/cssで要素が出てこなくて...
-
チェックボックスの背景色って...
-
サイトにコンテンツを並べる際...
-
CSS 可変マージン
-
HTML CSS 文字化け
おすすめ情報