『http://tv.starcat.co.jp/channel/lineup/』のようにテキストの上にマウスを置いた時に飛び出すようにテキストを表示させたいと思っています。
今までは<font title="○○">のタグで代用していましたが、これだと表示された後、数秒で消えてしまうのでやはり不便に感じました。
上のサイトではテキスト上でマウスを移動させると、飛び出したテキストも一緒に動いてしまいますが、できることならこの飛び出すテキストを飛び出した位置で固定状態にし、テキスト、もしくは飛び出したテキストの上にマウスが乗っている間は飛び出すテキストが消えない状態したいと思います。
更にできることなら、その飛び出したテキストの中にリンクや画像(サムネイルサイズ)を付けられたら良いなと考えているんですが、これら全てを含めることは可能でしょうか?
不可能であるなら、上のサイトのようにテキストを表示させる方法だけでも構いません。
このような方法を知っている方いらっしゃいましたらご教示をお願いします。
No.3
- 回答日時:
数秒後に消えるものは、とりあえず未実装。
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 '@MS 明朝';}
.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>
No.2
- 回答日時:
ツールチップと呼ばれるものですね。
>1さんが自作されていますが、今は色々とスクリプトが出ているので、
好みのものを探すのも楽しいと思いますよ。
http://www.google.co.jp/search?hl=ja&rlz=1B3GGGL …
参考に挙げられていたサイトはこちらのを使っているようです
http://www.dyn-web.com/code/tooltips/
回答ありがとうございます。
これってツールチップって言うんですね。
参考URLの方見てみましたが、英語で何書いてあるのかわかりませんでした(苦笑)
ただ、ダウンロードしてみたところ、便利な機能があるので今後使わせてもらうかもしれません。
紹介していただきありがとうございます。
ツールチップという名前だとわかったのは大きな収穫でした。
今後は自分なりにも探してみようかと思います。
ありがとうございました。
No.1
- 回答日時:
簡単そうだから手をつけてみたが、意外と時間がかかってしまった;_;
使い方、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」は、どこに付けるのか教えていただけないでしょうか?
色々とあつかましい質問ですが、よろしくお願いします。
お探しの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ランキング
-
idを使わずにonclickで自身の要...
-
ページ内に複数表がある場合のT...
-
functionから別のfunctionを実...
-
if文等のブロック内での関数宣...
-
phpでの文字の点滅表示
-
無名関数を使うメリットは何で...
-
関数でy=g(x)のgとは何の略です...
-
window.openでタイトル名の指定
-
javascript 特定のタグのidの存...
-
二次元配列を使って順位をだす...
-
今日の月と日付の1週間後や3日...
-
GASでGoogleフォームの自動返信...
-
任意の座標をクリックさせるには
-
同じIDで定義した要素の配列を...
-
javascriptで指定した日時にリ...
-
VB6における事前バインディング...
-
javascriptであるボタンを押す...
-
google apps scriptの終了のさせ方
-
重複しないくじの作り方がわか...
-
ラジオボタンでreadonlyの切替え
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
要素名がスペースを含む場合のj...
-
function(e)の意味を教えてくだ...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
関数名をテキストから読み込む...
-
jqueryuiのdialog
-
addEventListener()でリスナー...
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
drawImageの描画順序の指定につ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
おすすめ情報