アプリでもっと教えて！goo

プロが教える店舗＆オフィスのセキュリティ対策術

オンマウスでテキストを表示するためには

解決済

質問者：hirono_22
質問日時：2009/02/26 22:31
回答数：13件

『http://tv.starcat.co.jp/channel/lineup/』のようにテキストの上にマウスを置いた時に飛び出すようにテキストを表示させたいと思っています。

今までは<font title="○○">のタグで代用していましたが、これだと表示された後、数秒で消えてしまうのでやはり不便に感じました。

上のサイトではテキスト上でマウスを移動させると、飛び出したテキストも一緒に動いてしまいますが、できることならこの飛び出すテキストを飛び出した位置で固定状態にし、テキスト、もしくは飛び出したテキストの上にマウスが乗っている間は飛び出すテキストが消えない状態したいと思います。
更にできることなら、その飛び出したテキストの中にリンクや画像（サムネイルサイズ）を付けられたら良いなと考えているんですが、これら全てを含めることは可能でしょうか？
不可能であるなら、上のサイトのようにテキストを表示させる方法だけでも構いません。
このような方法を知っている方いらっしゃいましたらご教示をお願いします。

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

質問の本文を隠す

回答 (13件中1～10件)

No.1

回答者： _pipi_
回答日時：2009/02/27 11:20

簡単そうだから手をつけてみたが、意外と時間がかかってしまった;_;

使い方、mouoseover したいタグに class="popup-triger" をつける。

表示したいブロック要素に class="popup-view"をつける。
ただしtrigerより前にviewがあってはならない。（後方検索なので。）

cssのclassは複数あっても可！(class="popup-triger abc def")
なので、view側のpopup-viewは、display:noneだけにして
枠の飾りは他のクラスで行うと良いかもしれない

自分でも利用したいので、間違いがあれば、他の方に指導して頂ければ
助かります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Popup</title>
<style type="text/css">
.popup-triger { color:blue; }
.popup-view { display:none; width:100px; border:3px red double; background-color:#fee;}
</style>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view">1ここに説明やらリンクやら・・</div>
<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view">2ここに説明やらリンクやら・・</div>
<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view">3ここに説明やらリンクやら・・</div>

<script type="text/javascript">
//@cc_on
(function () {
var m = null;
var f = false;

document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) {
var element = evt./*@if(1)srcElement @else@*/ target /*@end@*/;
var nextEmt;
var pclsnam = getParentByClassName(element, 'popup-view', true);

if (m && pclsnam) f = true;
if (m && f && pclsnam == null) {
m.style.display = 'none'; f = false; m = null;
}
if (!m && element.className.match(/\bpopup-triger\b/)) {
if(nextEmt = getNextByClassName(element, 'popup-view')){
nextEmt.style.display = 'block';
nextEmt.style.position = 'absolute';
nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 'px';
nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 'px';
m = nextEmt;
}
}
}, false);

function getParentByClassName (obj, css, flag) {
var p = flag ? obj: obj.parentNode;
var r = new RegExp('\\b' + css +'\\b');
do if (p.className && p.className.match(r)) return p; while(p = p.parentNode)
return null;
}

function getNextByClassName (obj, css) {
var t;
var r = new RegExp('\\b' + css +'\\b');
while (obj = getNextNode(obj)) if (obj.className && obj.className.match(r)) return obj;
return null;
}

function getNextNode (node) {
var n;
if (n = node.firstChild) return n;
do if (n = node.nextSibling) return n; while (node = node.parentNode);
return null;
}

})();
</script>

この回答への補足

回答ありがとうございます。
おお！
これは凄く良いですね！わざわざ作っていただきお手数お掛けしました。ありがとうございます。
ただ…少し不便な点があり、テキストの上にマウスを乗せるとウィンドが飛び出すのは良いんですが、この後が少々問題です。
一度飛び出したウィンドにマウスを乗せないとウィンドが消えないようになっているようです。
これによって、1つ目のテキストの上にマウスを乗せてウィンドを出現させた後、2つ目のテキストにそのままスライドさせた時には2つ目のウィンドが出現しなくなっています。
マウスをテキスト1、テキスト2とスライドさせた時に、「前のウィンドを消して次のウィンドを出現」という風に、続け様にウィンドを出現させるということは不可能でしょうか？
些細なことではあるんですが、これが有るのと無いのとで利便性がかなり違ってくると思うので…。
できることなら、テキストかウィンドからマウスを放した後、数秒（1～2秒程度）で消えるようなシステムならベストなんですが。

あと、widthのサイズを指定せずに、フリーサイズにすることは可能でしょうか？
サイズをpxで指定した場合、ブラウザを横に伸ばして表示されてしまいました。ブラウザの端に行った時に折り返してくれると便利だなと思いまして。

あと、

> cssのclassは複数あっても可！(class="popup-triger abc def")
> なので、view側のpopup-viewは、display:noneだけにして
> 枠の飾りは他のクラスで行うと良いかもしれない

cssに詳しくないので、この辺りがよくわかりません。
申し訳ないですが、「class="popup-triger abc def"」や「display:none」は、どこに付けるのか教えていただけないでしょうか？

色々とあつかましい質問ですが、よろしくお願いします。

補足日時：2009/02/28 00:15

- 0
- 件

No.2

回答者： tenderfeel
回答日時：2009/02/27 12:29

ツールチップと呼ばれるものですね。

>1さんが自作されていますが、今は色々とスクリプトが出ているので、
好みのものを探すのも楽しいと思いますよ。
http://www.google.co.jp/search?hl=ja&rlz=1B3GGGL …

参考に挙げられていたサイトはこちらのを使っているようです
http://www.dyn-web.com/code/tooltips/

- 0
- 件

この回答へのお礼

回答ありがとうございます。
これってツールチップって言うんですね。
参考URLの方見てみましたが、英語で何書いてあるのかわかりませんでした（苦笑）
ただ、ダウンロードしてみたところ、便利な機能があるので今後使わせてもらうかもしれません。
紹介していただきありがとうございます。
ツールチップという名前だとわかったのは大きな収穫でした。
今後は自分なりにも探してみようかと思います。
ありがとうございました。

お礼日時：2009/02/28 01:17

No.3

回答者： _pipi_
回答日時：2009/02/28 09:03

数秒後に消えるものは、とりあえず未実装。

widthのフリーサイズとは？意味不明。
widthの指定を外し、適当なところで<br>でもすれば良いのでは？
出現と隠滅にはエフェクトを使いました！まぁ～見た目の問題だね^^;
スタイルシートの部分を変えたのそこを参照してわからないのであれば
再度質問を！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Popup</title>
<style type="text/css">
.popup-triger { color:blue; font:normal 20pt/20pt '@ＭＳ明朝';}
.popup-view { display:none; }
.abc{ color:red; }
.def{ background-color:#fee; border:3px red double; }
.ghi{ color:blue; }
.jkl{ background-color:#eef; border:3px blue double; }
</style>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view abc jkl">1ここに説明やらリンクやら・・</div>
<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view ghi jkl">2ここに説明やらリンクやら・・</div>
<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view abc def">3 CSSの複数指定ってこういうこと^^;</div>

<script type="text/javascript">
//@cc_on
(function () {
var m = null;
var f = false;
//setOpacity('p'

document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) {
var element = evt./*@if(1)srcElement @else@*/ target /*@end@*/;
var nextEmt;
var pclsnam = getParentByClassName(element, 'popup-view', true);
var timer = 3000; // = 3秒
var timerId = null;

if (element.className.match(/\bpopup-triger\b/)) {
if (m) {
m.style.display = 'none'; f = false; m = null;
}
if(nextEmt = getNextByClassName(element, 'popup-view')){
setOpacity(nextEmt,0,5,30);
nextEmt.style.display = 'block';
nextEmt.style.position = 'absolute';
nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 1+ 'px';
nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 1+ 'px';
m = nextEmt;
}
}
if (m && f && pclsnam == null) {
setOpacity(m,100,-5,30); f = false; m = null;
}
if (m && pclsnam) f = true;

}, false);

function getParentByClassName (obj, css, flag) {
var p = flag ? obj: obj.parentNode;
var r = new RegExp('\\b' + css +'\\b');
do if (p.className && p.className.match(r)) return p; while(p = p.parentNode)
return null;
}

function getNextByClassName (obj, css) {
var t;
var r = new RegExp('\\b' + css +'\\b');
while (obj = getNextNode(obj)) if (obj.className && obj.className.match(r)) return obj;
return null;
}

function getNextNode (node) {
var n;
if (n = node.firstChild) return n;
do if (n = node.nextSibling) return n; while (node = node.parentNode);
return null;
}
function setOpacity(e,o,s,w){
function g(){ if(o<0)o=0,f=2;if(o>100)o=100,f=1;
t./*@if(1)filter='alpha(opacity='+o+')'@else@*/opacity=o/100/*@end@*/;
if(!f) o+=s,setTimeout((function(){return function(){g()}})(this),w);}
if(f==2)t.display='none';
var f,t=e.style;g();
}

})();

</script>

- 0
- 件

No.4

回答者： _pipi_
回答日時：2009/02/28 09:26

3秒後に、消えます！×４♪

意外と実装が簡単だったのですぐできた！
でもグローバル変数みたいに扱っているので、
プログラム的には駄作だね^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Tool tip</title>
<style type="text/css">
.popup-triger { color:blue; }
.popup-view { display:none; }
.txt-red{ color:red; }
.waku1{ background-color:#fee; border:3px red double; }
.txt-blue{ color:blue; }
.waku2{ background-color:#eef; border:3px blue double; }
</style>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view txt-red waku2">3 CSSの複数指定ってこういうこと^^;</div>

<script type="text/javascript">
//@cc_on
(function () {
var m = null;
var f = false;
var timer = 3000; // = 3秒
var timerId = null;

document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) {
var element = evt./*@if(1)srcElement @else@*/ target /*@end@*/;
var nextEmt;
var pclsnam = getParentByClassName(element, 'popup-view', true);

if (element.className.match(/\bpopup-triger\b/)) {
if (m) {
if (timerId) timerId = (clearTimeout(timerId), null);
m.style.display = 'none'; f = false; m = null;
}
if(nextEmt = getNextByClassName(element, 'popup-view')){
timerId = setTimeout( (function(e){ return function(){
if(e.style.display == 'block') {
setOpacity(m,100,-5,30);
f = false; m = null;
}
};})(nextEmt),timer);
setOpacity(nextEmt,0,5,30);
nextEmt.style.display = 'block';
nextEmt.style.position = 'absolute';
nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 1+ 'px';
nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 1+ 'px';
m = nextEmt;
}
}
if (m && f && pclsnam == null) {
if (timerId) timerId = (clearTimeout(timerId), null);
setOpacity(m,100,-5,30); f = false; m = null;
}
if (m && pclsnam) f = true;

}, false);

function getParentByClassName (obj, css, flag) {
var p = flag ? obj: obj.parentNode;
var r = new RegExp('\\b' + css +'\\b');
do if (p.className && p.className.match(r)) return p; while(p = p.parentNode)
return null;
}

function getNextByClassName (obj, css) {
var t;
var r = new RegExp('\\b' + css +'\\b');
while (obj = getNextNode(obj)) if (obj.className && obj.className.match(r)) return obj;
return null;
}

function getNextNode (node) {
var n;
if (n = node.firstChild) return n;
do if (n = node.nextSibling) return n; while (node = node.parentNode);
return null;
}
function setOpacity(e,o,s,w){
function g(){ if(o<0)o=0,f=2;if(o>100)o=100,f=1;
t./*@if(1)filter='alpha(opacity='+o+')'@else@*/opacity=o/100/*@end@*/;
if(!f) o+=s,setTimeout((function(){return function(){g()}})(this),w);}
if(f==2)t.display='none';
var f,t=e.style;g();
}
})();
</script>

- 0
- 件

No.5

回答者： _pipi_
回答日時：2009/02/28 15:35

これは自分の勉強のためにです。

エフェクトが効いていません。
ノードの関数を中に含めるべきなのだろうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Tool tip</title>
<style type="text/css">
.popup-triger { color:blue; }
.txt-red　{ color:red; }
.waku1　{ background-color:#fee; border:3px red double; }
.txt-blue　{ color:blue; }
.waku2　{ background-color:#eef; border:3px blue double; }
</style>

<p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p>
<div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<div class="popup-view txt-red waku2">3 CSSの複数指定ってこういうこと^^;</div>

<script type="text/javascript">
//@cc_on
//___________________________________________________________
/*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () {

//指定したCSSが親にあるか？
function getParentByClassName (obj, css_reg) {
　do if (obj.className && obj.className.match(css_reg)) return obj; while(obj = obj.parentNode)
　return null;
}

//指定したCSSの次のノード
function getNextByClassName (obj, css_reg) {
　while (obj = getNextNode(obj)) if (obj.className && obj.className.match(css_reg)) return obj;
　return null;
}

//次のノード
function getNextNode (node) {
　var n;
　if (n = node.firstChild) return n;
　do if (n = node.nextSibling) return n; while (node = node.parentNode);
　return null;
}

//___________________________________________________________

function ToolTip () {
　this.init.apply(this, arguments);//初期化
}

ToolTip.prototype.init = function (triger_css, fellow_css, time) {
　this.memory = null;
　this.overflag = false;
　this.triger = new RegExp('\\b' + triger_css + '\\b');
　this.fellow = new RegExp('\\b' + fellow_css + '\\b');
　this.timer = time;
　
　var o, objs = document.getElementsByTagName('*');//対象のものだけ非表示に
　var count = 0;
　while (o = objs[count++]) {
　　if (o.className && o.className.match(this.fellow)) {
　　　with (o.style) {
　　　　display = 'none';
　　　　position = 'absolute';
//　　　　filter = 'Alpha(opacity=0)';
//　　　　opacity = 0;
　　　}
　　}
　}
　document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover',
　　(function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false);
};

ToolTip.prototype.check = function (evt) {
　var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/;
　var x0, x1, m, o;
　
　if (getParentByClassName(element, this.triger)) {
　　this.disp();
　　if (n = getNextByClassName(element, this.fellow)) {
　　　x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1;
　　　x1 = document.body.offsetWidth - n.offsetWidth; //ここは安易すぎ？
　　　n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px';
　　　n.style.left = (x1 < x0 ? x1: x0) + 'px';
　　　this.memory = n;
　　　this.disp(true);
　　}
　} else {
　　o = getParentByClassName(element, this.fellow);
　　if (this.memory)
　　　if (o) this.overflag = true; else if (this.overflag) this.disp(); //表示したTipを消すか？
　}
};

ToolTip.prototype.disp = function (flag) {
　if (!this.memory) return;
　this.overflag = false;
　this.memory.style.display = flag ? 'block': 'none';
　if (!flag) this.memory = null;
};
//________________________________________________

new ToolTip('popup-triger', 'popup-view', 1000);

}, false);

</script>

- 0
- 件

No.6

回答者： _pipi_
回答日時：2009/02/28 18:01

ごめん！連続で・・

まだ手直しが必要。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Tool tip</title>
<style type="text/css">
.popup-triger { color:blue; }
.txt-red { color:red; }
.waku1 { background-color:#fee; border:3px red double; }
.txt-blue { color:blue; }
.waku2 { background-color:#eef; border:3px blue double; }
</style>

<p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p>
<div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<span class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</span>

<script type="text/javascript">
//@cc_on
//___________________________________________________________
/*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () {

//指定したCSSが親にあるか？
function getParentByClassName (obj, css_reg) {
　do if (obj.className && obj.className.match(css_reg)) return obj; while(obj = obj.parentNode)
　return null;
}

//指定したCSSの次のノード
function getNextByClassName (obj, css_reg) {
　while (obj = getNextNode(obj)) if (obj.className && obj.className.match(css_reg)) return obj;
　return null;
}

//次のノード
function getNextNode (node) {
　var n;
　if (n = node.firstChild) return n;
　do if (n = node.nextSibling) return n; while (node = node.parentNode);
　return null;
}

//___________________________________________________________

function ToolTip () {
　this.init.apply(this, arguments);//初期化
}

ToolTip.prototype.init = function (triger_css, fellow_css, time) {
　this.memory = null;
　this.overflag = false;
　this.triger = new RegExp('\\b' + triger_css + '\\b');
　this.fellow = new RegExp('\\b' + fellow_css + '\\b');
　this.timer = time;
　
　var o, objs = document.getElementsByTagName('*');//対象のものだけ非表示に
　var count = 0;
　while (o = objs[count++]) {
　　if (o.className && o.className.match(this.fellow)) {
　　　with (o.style) {
　　　　visibility = 'hidden';
　　　　position = 'absolute';
　　　　filter = 'Alpha(opacity=0)';
　　　　opacity = 0;
　　　}
　　}
　}
　document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover',
　　(function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false);
};

ToolTip.prototype.check = function (evt) {
　var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/;
　var x0, x1, m, o;
　
　if (getParentByClassName(element, this.triger)) {
　　this.disp();
　　if (n = getNextByClassName(element, this.fellow)) {
　　　x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1;
　　　x1 = document.body.offsetWidth - n.offsetWidth; //ここは安易すぎ？
　　　n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px';
　　　n.style.left = (x1 < x0 ? x1: x0) + 'px';
　　　this.memory = n;
　　　this.disp(true);
　　}
　} else {
　　o = getParentByClassName(element, this.fellow);
　　if (this.memory)
　　　if (o) this.overflag = true; else if (this.overflag) this.disp(); //表示したTipを消すか？
　}
};

ToolTip.prototype.disp = function (flag) {
　if (!this.memory) return;
　this.overflag = false;
　if (flag) {
　　new Opacity(this.memory, 0, 5, Math.floor(this.timer / 20));
　　setTimeout( (function(cb_) { return function () { cb_.disp(); }; })(this), 5000);
　} else {
　　new Opacity(this.memory,100, -5, Math.floor(this.timer / 20));
　}
　if (!flag) this.memory = null;
};

//________________________________________________
function Starter (callbackfn) {
this.timerID = (function (o) {
return setInterval(function () { return callbackfn.call(o); }, o.interval);
})(this);
}
function Stopper () { clearInterval(this.timerID); }

function Timer () { this.timerID = null; this.interval = this.time;}
Timer.prototype.start = function (listener) { return Starter.call(this, listener); };
Timer.prototype.stop = function () { return Stopper.call(this); };
//________________________________________________
function Decorator (alpha) {
//@ this.filter = 'Alpha(opacity=' + alpha + ')';
this.opacity = alpha / 100 + '';
}
//________________________________________________
function Opacity () {
　this.init.apply(this, arguments);
　Timer.call(this);
　this.start(this.changer);
}

Opacity.prototype = new Timer();
Opacity.prototype.constructor = Opacity;

Opacity.prototype.init = function (element, opacity, step, time) {
　var x = Opacity['#instances'];
　var c = 0;
　var o;
　var f = false;
　
　this.element = element;
　this.step = step;
　this.time = time;
　this.opacity = null;
　this.setOpacity(opacity);
　
　while (o = x[c++]) {
　　if (o == element) {
　　　f = true;
　　　x[c].end();
　　　Opacity['#instances'][c] = this;
　　}
　}
　if(!f) Opacity['#instances'].push(element, this);
};
Opacity.prototype.setOpacity = function (n) {
　var f0 = (n < 0);
　var f1 = (n > 100);
　if (f0) this.element.style.visibility = 'hidden';
　this.opacity = n = f0 ? 0: (f1 ? 100: n);
　Decorator.call(this.element.style, n)
　return f0 || f1;
};
Opacity.prototype.changer = function () {
　this.opacity += this.step;
　if (this.opacity >0 ) this.element.style.visibility = 'visible';
　if(this.setOpacity(this.opacity)) this.stop();
}
Opacity.prototype.end = function () {
　this.stop();
　this.setOpacity((this.step>0 ? 100: 0));
}
Opacity['#instances'] = [];
//________________________________________________

new ToolTip('popup-triger', 'popup-view', 500);

}, false);

</script>

この回答への補足

お…惜しい…惜し過ぎる。
良い感じではあるんですが…。
テキストと飛び出したウィンドにマウスを乗せている間は、ウィンドに消えてほしくないんですよ。3秒後に消えるだけだと<font title>のタグと変わらない性能になってしまうので。
自分の考えとしては、No.3で回答していただいたものが理想に一番近い感じです。あとはこれに上のような感じのものが組み合わされば…。

なるほど、cssの複数指定については、自分の無い頭でもある程度理解できました。
わざわざ説明ありがとうございます(^^)

widthのフリーサイズというのは、サイズを指定せずに端まで行ったら折り返すことはできないのかなと。確かに<br>でも良いんですが、指定しないことは可能なのかなと思いまして。
これは大した問題でもないので出来ないなら出来なくても結構です。

あと、前の捕捉で書き忘れてしまったんですが、乗せた後、ウィンド出現までわずかばかりの時間（0.5～1秒くらい）があると更に便利かなと思います。
無理言ってすみません。

補足日時：2009/02/28 20:13

- 0
- 件

No.7

回答者： _pipi_
回答日時：2009/02/28 20:22

ごめんね～！

今必死こいて、オブジェクト指向的考え方で書いてます。
もちろん自分の勉強のためにね^^;
できるなら、しばらく閉じないでおくれ～！

- 0
- 件

No.8ベストアンサー

回答者： _pipi_
回答日時：2009/02/28 21:21

疲れた～。

今日はここまで！

とりあえず、開いた要素にマウスが乗っかってる状態のときは消さないようにしました。
要素はdisplayでなくvisibiltyをいじっているので、インライン要素にも適用可能。
window.onload後にToolTipを起動したら、対象の要素を消してます

トリガーにしかけるのと、数秒後に起動は、のちほど！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Tool tip</title>
<style type="text/css">
.popup-triger { color:blue; }
.txt-red　{ color:red; }
.waku1　{ background-color:#fee; border:3px red double; }
.txt-blue　{ color:blue; }
.waku2　{ background-color:#eef; border:3px blue double; }
</style>

<p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p>
<div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div>

<p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p>
<span class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</span>

<script type="text/javascript">
//全角空白は半角空白かタブに変換のこと
//@cc_on
/*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () {

//指定したCSSが親にあるか？
function getParentByClassName (e, css_reg) {
　do if (('' + e.className).match(css_reg)) return e; while (e = e.parentNode); return null;
}
//指定したCSSの次のノード
function getNextByClassName (obj, css_reg) {
　while (obj = getNextNode(obj)) if (('' + obj.className).match(css_reg)) return obj; return null;
}
//次のノード
function getNextNode (node) {
　var n; if (n = node.firstChild) return n;
　do if (n = node.nextSibling) return n; while (node = node.parentNode); return null;
}
//-----
function ToolTip () { this.init.apply(this, arguments); }

ToolTip.prototype.init = function (triger_css, target_css, time) {//初期化
　var count = 0;
　var o, s, objs = document.getElementsByTagName('*');

　this.memory = null;//表示したTipを保存
　this.overflag = 0;
　this.triger_reg = new RegExp('\\b' + triger_css + '\\b');//検索用
　this.target_reg = new RegExp('\\b' + target_css + '\\b');//検索用
　this.timer = time;
　this.cnt = 0;
　
　while (o = objs[count++]) { //対象のものだけ非表示に
　　if (('' + o.className).match(this.target_reg)) {
　　　s = o.style;
　　　s.visibility = 'hidden';
　　　s.position = 'absolute';
　　　s./*@if (1) filter = 'Alpha(opacity=0)' @else@*/ opacity = 0 /*@end@*/;
　　}
　}
　document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover',
　　(function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false);//イベント追加
};

ToolTip.prototype.check = function (evt) {//mouseoverされるたび処理
　var x0, x1, n, o, element = evt./*@if (1) srcElement @else@*/ target/*@end@*/;
　if ((''+element.className).match(this.triger_reg)) { //トリガー？
　　if (n = getNextByClassName(element, this.target_reg)) {
　　　if (this.memory == n) return;
　　　this.hide();
　　　x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1;
　　　x1 = document /*@if (1) [document.compatMode == 'CSS1Compat' ?
　　　　'documentElement' : 'body'].clientWidth /*@else@*/ .defaultView.innerWidth /*@end@*/ - n.offsetWidth;
　　　n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px';
　　　n.style.left = (x1 < x0 ? x1: x0) + 'px';
　　　this.disp(n);
　　} else {
　　　alert('対象となる要素がありません'); return; //error!!
　　}
　} else {
　　o = getParentByClassName(element, this.target_reg);
　　if (this.overflag ==0 && this.memory && this.memory == o) {
　　　this.overflag = 1;
　　} else if (this.overflag == 1 && this.memory && o == null) {
　　　this.hide();
　　}
　}
};

ToolTip.prototype.disp = function (element) {
　this.cnt = (this.cnt+1) % 256;
　new Opacity(element, 0, 5, Math.floor(this.timer / 20));
　setTimeout( (function(cb_, n) { return function () { cb_.later(element, n); }; })(this, this.cnt), 3000);
　this.memory = element;
　this.overflag = 0;
};
ToolTip.prototype.hide = function () {
　if (this.memory) {
　　new Opacity(this.memory,100, -5, Math.floor(this.timer / 20));
　　this.memory = null;
　　this.overflag = 0;
　}
};
ToolTip.prototype.later = function (element, cnt) {
　if (element == this.memory && this.overflag == 0 && this.cnt == cnt) this.hide();
}

//________________________________________________
function Starter (callbackfn) {
this.timerID = (function (o) {
return setInterval(function () { return callbackfn.call(o); }, o.interval);
})(this);
}
function Stopper () { clearInterval(this.timerID); }
function Timer () { this.timerID = null; this.interval = this.time;}
Timer.prototype.start = function (listener) { return Starter.call(this, listener); };
Timer.prototype.stop = function () { return Stopper.call(this); };
//_____
function Decorator (alpha) {
//@ this.filter = 'Alpha(opacity=' + alpha + ')';
this.opacity = alpha / 100 + '';
}
//_____
function Opacity () {
　this.init.apply(this, arguments);
　Timer.call(this);
　this.start(this.changer);
}

Opacity.prototype = new Timer();
Opacity.prototype.constructor = Opacity;
Opacity['#instances'] = [];

Opacity.prototype.init = function (element, opacity, step, time) {
　var c = 0, f = false, o;
　
　this.element = element;
　this.step = step;
　this.time = time;
　this.opacity = opacity;
　
　while (o = Opacity['#instances'][c++]) { //同じ要素なら上書き
　　if (o == element) {
　　　f = true;
　　　Opacity['#instances'][c].end();
　　　Opacity['#instances'][c] = this;
　　}
　}
　if(!f) Opacity['#instances'].push(element, this); //要素リストに追加
};

Opacity.prototype.setOpacity = function (n) {
　var f0 = (n < 0);
　var f1 = (n > 100);
　if (f0) this.element.style.visibility = 'hidden';
　this.opacity = n = f0 ? 0: (f1 ? 100: n);
　Decorator.call(this.element.style, n)
　if (f0 || f1) this.stop();
　return true;
};

Opacity.prototype.changer = (function () {
　return function () {
　　this.setOpacity(this.opacity);
　　this.opacity += this.step;
　　if (this.opacity >0 ) this.element.style.visibility = 'visible';
　};
})();

Opacity.prototype.end = (function () {
　return function () { this.setOpacity((this.step>0 ? 101: -1)); };
})();
//________________________________________________
new ToolTip('popup-triger', 'popup-view', 700);

}, false);

</script>

- 0
- 件

No.9

回答者： N_A_O
回答日時：2009/02/28 21:28

これだとCSSで良いんじゃない。

<style>
a.screen1,a.screen2,a.screen3, a.screen1:visited,a.screen2:visited,a.screen3:visited {color:#c00; position:relative; z-index:1;}
a.screen1 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #ff0; left:0; top:15px; }
a.screen2 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #f0f; left:-200px; top:0px; }
a.screen3 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #0ff; left:-200px;top:0px; }
a.screen1:hover ,a.screen2:hover ,a.screen3:hover {text-decoration:none; z-index:1000; border:0;}
a.screen1:hover b {visibility:visible;height:110px;cursor:pointer;z-index:500; background:#ff0;border:0;}
a.screen2:hover b {visibility:visible;height:130px;cursor:pointer;z-index:500; background:#f0f;border:0;}
a.screen3:hover b {visibility:visible;height:150px;cursor:pointer;z-index:500; background:#0ff;border:0;}
a.screen1:hover b img,a.screen2:hover b img,a.screen3:hover b img {border:0;}
</style>

<a class="screen1" href="http://www.goo.ne.jp/">London <b><img src="../jpg/5.jpg;w=200&h=500" alt="website image" title="website image" />And boasts four World Heritage Sites.</b></a> has the greatest concentration of major attractions in Britain<br>
Some of the most popular places of interest with visitors are<a class="screen2" href="http://www.yahoo.com/"> Nottingham Castle Museum and Art Gallery,<b> the historic Lace Market area and the Caves.<img src="../jpg/6.jpg;w=200&h=500" alt="website image" title="website image" /></b></a><br>
Swansea, Wales' City by the Sea and birthplace of <a class="screen3" href="#nogo">Dylan Thomas and Catherine Zeta Jones,<b><img src="../jpg/7.jpg;w=200&h=500" alt="website image" title="website image" /> is a lively and vibrant maritime city and regional shopping centre.</b></a></p>

- 0
- 件

No.10

回答者： _pipi_
回答日時：2009/02/28 22:02

No.9 たしかに・・・^^;

でも必ずしも、表示させたい場所に出てくるわけではないね
３番目のものだと、文頭のとき、左過ぎで見えなかったり・・。

じんわりと消えたり、出たりするのが、俺は好み^^;

この回答への補足

良い感じです。
しかし…NO.8の方法だと、今度はなぜかウィンドの枠が表示されず、透明になってしまっています…。

あと、出来ればマウスを乗せる対象であるテキスト（トリガーの方）に、マウスが乗っている間もウィンドに消えてほしくはないと思ってました。
が、これは秒数を調整すれば問題無さそうなので、出来なければ結構です。
こんなにまでやっていただきありがとうございます(^^)

補足日時：2009/03/01 22:26

- 0
- 件

1 2 次の回答→

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

似たような質問が見つかりました

JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで表示されるアラ 1 2022/05/20 11:16
PowerPoint（パワーポイント）パワーポイントアニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
Access（アクセス） Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
その他（ブラウザ） Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
タブレット iPadの操作方法 2 2022/11/18 10:16
その他（セキュリティ）特定のWEBページのフリーズ AMAZONサイト PC側？ネットワーク？サイトに問題？ 1 2023/01/30 16:23
Access（アクセス） Accessで予定表を作成しようとしてます。テーブルフィールド名連番オートナンバー型年月日 2 2023/07/23 11:40
Excel（エクセル）テキストの背後にあるオブジェクトとは 3 2023/01/03 20:22
UNIX・Linux Ubuntu22.04、nanoエディタの使い方について 2 2022/10/24 19:50

関連するカテゴリからQ&Aを探す

ページトップ

おすすめ情報

質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報