痔になりやすい生活習慣とは?

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (13件中1~10件)

疲れた~。

今日はここまで!

とりあえず、開いた要素にマウスが乗っかってる状態のときは消さないようにしました。
要素は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>
    • good
    • 0

閉じていいですよ!



なんかオブジェクト指向ってのが良く理解できてなくて・・・
例えば
var a = new ToolTip('Triger', 'Target', 1000, 1000);
の他に
var b = new ToolTip('Triger2', 'Target2', 300, 300);
var c = new ToolTip('Triger3', 'Target3, 200, 200);
と定義しておくと、複数の箇所で、違うタイミングで表示できます。
なので、この場合 a b c がバッティングしないようにというか
そんなのを考えていたら、どんどん複雑になってきて、今の
自分の頭では、無理っぽかったのは事実。
もうちょっと精進します。
    • good
    • 0
この回答へのお礼

では、質問を締め切らせていただきます。
ここまで長い間お付き合いくださり、本当にありがとうございました!(^^)
言葉でお礼し尽くすことができませんが、凄く助かりました。
ありがたく使わせていただきます。

お礼日時:2009/03/17 23:50

年度末は忙しい!


IEだといきなり現れる!?
とりあえず。放り投げる!^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Tool tip</title>

<style type="text/css">
.ctype1 { border:3px #f00 double; background-color:#fee; }
.ctype2 { border:1px #0ff double; background-color:#eef; }
</style>

<p><span class="Triger ctype1" id="t0">ここは地雷</span></p>
<div class="Target ctype2" id="d0">
説明1:これが表示されます
</div>

<p><span class="Triger ctype1" id="t1">ここは地雷2</span></p>
<div class="Target ctype2" id="d1">
説明2:これが表示されます
</div>


<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 OpacityManager () {
this.init.call(this, arguments);
}
OpacityManager.prototype.init = function () {
this.elementBuffer = [];
this.opacity = [];
this.updown = [];
this.step = 2;
this.time = 20;
};
OpacityManager.prototype.disp = function (element, x, y) {
var n = this.num(element);
var f = (this.updown[n] == 0);
var s = element.style;

if (undefined != y) s.top = y + 'px';
if (undefined != x) s.left = x + 'px';
this.updown[n] = 1;
if (f) this.changer(n); //二重起動防止のため updown==0 を判別。
};
OpacityManager.prototype.hide = function (element) {
var n = this.num(element);
var f = (this.updown[n] == 0);
this.updown[n] = -1;
if (f) this.changer(n);
};
OpacityManager.prototype.changer = function (n) {
var flag = false;
var style = this.elementBuffer[n].style;
var alpha = this.opacity[n] + this.step * this.updown[n];

if ( 100 < alpha) { alpha = 100; flag = true; this.updown[n] = 0; }
if ( 0 > alpha) { alpha = 0; flag = true; this.updown[n] = 0; }
Opacity.call(style, alpha);
this.opacity[n] = alpha;
if (!flag) {
setTimeout((function (cb_, n) { return function() {cb_.changer(n)}; })(this, n), this.time);
}
}
OpacityManager.prototype.getStatus = function (element) {
return this.updown[this.num(element)];
};
OpacityManager.prototype.num = function (element) {
var count = 0;
var o;
var s = element.style;

while (o = this.elementBuffer[count]) {
if (o == element) return count;
count++;
}
this.elementBuffer.push(element);
this.opacity.push(0);
this.updown.push(0);
Opacity.call(s, 0);
return count;
};
function Opacity (alpha) {
var f = (alpha > 0);
//@ this.filter = 'Alpha(opacity=' + alpha + ')';
this.opacity = alpha / 100 + '';
this.visibility = f ? 'visible': 'hidden';
this.zIndex = f ? 1: 0;
}
var om = new OpacityManager;

function ToolTip () {
this.init.apply(this, arguments);
}
ToolTip.prototype.init = (function (changer) {
return function(triger_css, target_css, delay_time0, delay_time1) {
var count = 0;
var o, objs;
this.time0 = delay_time0;
this.time1 = delay_time1;

this.triger_m = null;
this.target_m = null;
this.triger_reg = new RegExp('\\b' + triger_css + '\\b');//検索用
this.target_reg = new RegExp('\\b' + target_css + '\\b');//検索用
this.loop_cnt = 0;
//初期化 targetを消す
objs = document.getElementsByTagName('*');
while (o = objs[count++]) {
if (o.className && o.className.match(this.target_reg)) {
changer.num(o);
o.style.position = 'absolute';
}
}

//mouseover イベント追加
document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover',
(function (cb_) { return function (evt) { cb_.mouseCheck(evt); }; })(this), false);
return true;
};
})(om);

ToolTip.prototype.mouseCheck = (function (changer) {
return function (evt) {
var x0, x1, x, y;
var target;
var status;
var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/;
var triger = getParentByClassName(element, this.triger_reg);//マウスが移動しても親は同じ可能性がある
target = getParentByClassName(element, this.target_reg); // targetを得る

if (target && changer.getStatus(target)!=0) {this.disp(target,this.loop_cnt);return}
if (triger == this.triger_m) return;
this.loop_cnt = (this.loop_cnt + 1) % 256; //一度外れて戻ってきた場合を判断
if (this.triger_m) {
setTimeout( (function(cb_, element) { //n秒後に呼び出す
return function () { cb_.hide(element); }; })(this,this.target_m),
this.time0);
this.triger_m = null;
this.target_m = null;
}
if (!triger) return;

target = getNextByClassName(triger, this.target_reg); // targetを得る
if (!target) { alert('Error! 対応するタグが見つかりません'); return; }
if (target) {
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@*/ - target.offsetWidth;
y = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1;
x = (x1 < x0 ? x1: x0);
setTimeout( (function(cb_, cnt) { //n秒後に呼び出す
return function () { cb_.disp(target, cnt, x, y); }; })(this, this.loop_cnt),
this.time0);
this.triger_m = triger;
this.target_m = target;
}
};
})(om);
ToolTip.prototype.disp = (function (changer) {
return function (element, cnt, x, y) {
if (this.loop_cnt == cnt) changer.disp(element, x, y);
};
})(om);
ToolTip.prototype.hide = (function (changer) {
return function (element) {
changer.hide(element);
};
})(om);

var a = new ToolTip('Triger', 'Target', 1000, 1000);

}, false);

</script>

この回答への補足

NO.8のものは、自分で解決することができました。

こんなにも考えていただきありがとうございます。
しかし、う~ん、やっぱりちょっと使い難いですね。
テキストに乗っている間は消えなくなっているんですが、今度は一度飛び出したウィンドに乗せてしまうと、ウィンドの方が消えなくなっています。
数秒後に呼び出すものも、閲覧者からするとちょっと時間がかかり過ぎていて、ウィンドが出るかどうか判断できない状態で次に行ってしまいそうです。

個人的にこうあると良いだろうと思っている要点をまとめると
 ・テキストにマウスが乗っている間はウィンドが消えない。テキストから離すと消える。
 ・ウィンドにマウスが乗っている間もウィンドが消えない。ウィンドから離すと消える。
 ・ウィンドの出現には、テキストにマウスを乗せて0.5秒~1秒ほどの間があるくらいがベスト。
 ・他のテキストに乗せると、その前に出現していたウィンドが消えて、新しい方のウィンドが開く。
こんなところでしょうか。
個人的にはNO.8が一番使い易いかなと思います。
ご自分でも利用したいと仰ってましたが、私の意見としてはNO.8が最も利便性が高いのではないかと思います。

お忙しい中、ここまでお付き合いくださりありがとうございます(^^)
私の悩みの方は、NO.8でほとんど解決しました。
よろしければこの質問を閉じたいと思いますが、よろしいでしょうか?

補足日時:2009/03/13 20:03
    • good
    • 0

簡単な質問には答える時間があるのだけれど


これは俺の頭だと時間がかかりそう;_;
じっくり落ち着いて考えられるときにやりますね!
こんな風に書いてくれる人が沢山いてくれれば
勉強になるのだけれど・・・
これも、とあるHPで教えていただいたものを
熟読しながら1(?)見よう見まねで書いているけど、
いまだに消化できていないのかも?
う~~ん、悩む^^;
神様みたいな人がいるんだよね~^^;


ところでcssの名前が間違ってない?

この回答への補足

CSSの名前が間違ってるとは?
NO.8で書いていただいたものを、そのままコピペして動作確認してみたので、知識の無い自分にはどこが間違ってるのかわからないんですが…。

しかし見よう見真似でこれをやってるとは……凄いですね。

補足日時:2009/03/01 23:52
    • good
    • 0

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



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

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

この回答への補足

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

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

補足日時:2009/03/01 22:26
    • good
    • 0

これだと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&amp;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&amp;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&amp;h=500" alt="website image" title="website image" /> is a lively and vibrant maritime city and regional shopping centre.</b></a></p>
    • good
    • 0

ごめんね~!


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

ごめん!連続で・・


まだ手直しが必要。
<!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
    • good
    • 0

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


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

<!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>
    • good
    • 0

3秒後に、消えます!×4♪


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

<!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>
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qマウスオーバーで文字を表示したい

ブログ内の全ての画像に マウスを重ねた時だけ

同じ文字(例”画像をダウンロード・・・・”)を表示したいのですが

どの様に記述すれば可能なのか ご教授お願いいたします。

Aベストアンサー

あまり必要ないと思いますが・・・リンク自体も。
ブラウザのコンテキストメニューに「画像に名前をつけて保存」があるはずなので、画像がほしい人は画像を右クリックして表示されるコンテキストメニューから選択してもらえばよいだけです。
 titleがワンテンポ遅れて表示されるのは、ユーザビリティの観点から、タイトルが必要ならマウスを乗せたままにしておくと、はじめて表示されるほうがやさしいからです。いきなり出てきたら周囲の何かが隠される。

 それをすぐ表示させるのは、おせっかいすぎるような気がします。--できますが---

 大きな画像へリンクしている場合は、いずれにしてもHTMLソースを書き加えなきゃならない。
 <a href="*****/abc.jpg" title="大きな画像へ"><img ***** alt="***"></a>
 

Qselect文のwhere句に配列を入れて検索したい

こんばんは。
題名の通り、select文のwhere句に配列を入れて検索したいのですが、
同じ質問↓も見つけ、やってはみるのですがうまくいかないので、教えてください。
http://oshiete1.goo.ne.jp/qa2940474.html

現在、
$member_id という配列にデータを入れ(この配列には正しく値が入っています。)
$sql = "SELECT * FROM テーブル名 WHERE id IN (".$member_id.");

としているのですが、うまくいきません。
どこがおかしいのでしょうか。
よろしくお願いします。

Aベストアンサー

どのプログラミング言語を使っているのかわかりませんが、(書かないところを見るとPHP?)

配列に文字列が入っているとして、それをカンマ区切りでつなげた文字列を作って、それを IN の後のカッコの中に入れないといけません。

PHPだとすると、
$sql = "SELECT * FROM テーブル名 WHERE id IN (".implode(",",$member_id).");";

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。


人気Q&Aランキング