- 締切済み
javascriptでURLにマウスオーバー
言語はjavascriptでURLにマウスオーバー すればクリックしないでリンク先へ飛べるものが作りたい。 要するにクリックをなるべく使用しないサイトの構築をしたいんです、 URLにマウスをのせると（ポップアップやツールチップのようなもの(1)）が出てきて、（そこ(1)）にマウスを乗せるとサイトへ飛べるようなものが作りたいです。 下記のURLなどを参考につくってみようとしたんですけど、うまく作れなかったので、 できるかたがいらっしゃいましたらよろしくおねがいします。 h ttp://jqueryfordesigners.com/demo/coda-bubble.html h ttp://www.vegabit.com/Examples/position-align.html ファイヤーフォックスのアドオンのリンク先のサイトプレビューができる「CoolPreviews」などはわかりやすいと思います。 ■←これにマウスをのせる。 すると、■の上のほうに▲が現れる。それにマウスをのせると自動で飛べるってのはできませんか？▲にマウスをのせなかったら二秒後くらいに消える。そういう設定が理想です。 ■ マウスをのせる ▲ ■ がでてくる ▲にマウスをのせると リンク先へ自動で飛べる みたいなのです。 標準のツールチップヒントなどはtitle属性を使うため、属性にさらに属性を組むことができない ですがoverLibというのがありました。 h ttp://www.bosrup.com/web/overlib/ h ttp://www.javable.jp/notes/webscripts/overlib.html しかし, htmlタグは組み込めるようですが、javascriptの関数はできないようです。 何か良いアイデアがありましたら教えてください。
- mtmt1984
- お礼率28% (2/7)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
テキストの■、▲でやって見ました。 サンプルHTML↓の様に HoverMarker.js を積んでおいて、 HoverMarker.init("A"," ■ "," ▲ ",5000); と呼び出すと、ドキュメント内の全<a>要素の前に■を付けて、 マウスオーバーすると横に▲が出現して5000ミリ秒後に消えます。 ▲をマウスオーバーすると、その<a>要素のリンク先にその<a>要素の ターゲットで開きます。 ※IE8以上だと、"A"の変わりに<a>要素を選ぶCSSセレクター書式も 使えます。 ※ちょっと改造すれば、" ■ "," ▲ "の変わりに、任意に作った nodeを渡せるように出来そうです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample</title> <script type="text/javascript" src="/HoverMarker.js"></script> </head> <body> <p> <a href="link1.html" target="_blank">link1</a><br> <a href="link2.html" target="_blank">link2</a><br> <a href="link3.html" target="_blank">link3</a><br> </p> <script type="text/javascript"> HoverMarker.init("A"," ■ "," ▲ ",5000); </script> </body> </html> HoverMarker.jsのソースは、 https://gist.github.com/726663 に置きました。
- fujillin
- ベストアンサー率61% (1594/2576)
// つづき show : function(evt, t) { var s, x, y; s = this.dlg.style; if (s.display != "none") clearTimeout(this.timerId); this.href = t.href; this.dlg.getElementsByTagName("p")[0].innerHTML = t.getAttribute("href"); s.display = "block"; x = evt.clientX; x += (x>this.view[this.width]-160)?-170:10; y = evt.clientY; y += y<50?10:-50; s.left = ((window.pageXOffset || this.doc.scrollLeft) + x) + "px"; s.top = ((window.pageYOffset || this.doc.scrollTop) + y) + "px"; this.timerId = setTimeout(this.trans("hide"), 2000); }, hide : function() { this.dlg.style.display = "none"; }, init : function() { this.doc = document.compatMode=="CSS1Compat"?document.documentElement:document.body; this.view = /*@if(1)this.doc @else @*/ document.defaultView /*@end @*/; this.width = /*@if(1) "clientWidth"@else @*/ "innerWidth"/*@end @*/; document./*@if(1) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'mouseover', this.trans("checker"), false); } } jumpDialog.init(); //--> </script> </body> </html>
お礼
どーもありがとうございました。参考にします。
- fujillin
- ベストアンサー率61% (1594/2576)
サンプルとして。 仕様が不明なので、いい加減です。 id="jumpDialog"のDIVを表示する対象要素としています。「▲Jump?▲」部分にオンマウスすると遷移します。 IEだとgetAttributeでもフルパスが帰るようで、リンク先の表示がオーバーフローしちゃうけどサンプルなので良しとしてください。 表示はマウスの右上を基本にしていますが、画面から飛び出る場合は調整してます。（スクリプトの1/3くらいはこの調整） 文字制限に引っかかると思うので2分割になりそう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #jumpDialog { width:150px; height:41px; border:2px ridge #aac; position:absolute;background-color:#def; font-size:14px; overflow:hidden; display:none; } #jumpDialog div { height:14px; padding:3px; background-color:#48c; text-align:center; } #jumpDialog p { margin:0; padding:4px; } </style> </head> <body> <div style="width:900px; height:600px;"> <a href="Test2/A.html">Ahtml</a> <p style="height:400px;">space</p> <div style="text-align:right;"> <a href="Test2/B.html"><span>Bhtml</span></a> </div> </div> <div id="jumpDialog"> <div>▲Jump?▲</div> <p>srcha nanntarakanntara desutoiukotowokaku</p> </div> <script type="text/javascript"> <!-- //@cc_on var jumpDialog = { timerId : null, href : "", dlg : document.getElementById("jumpDialog"), trans : function(nam) { return function() { jumpDialog[nam].apply(jumpDialog, arguments); } }, checker : function(evt) { var t = evt.target || evt.srcElement; if (t.nodeName == "DIV" && t.parentNode.id == "jumpDialog") this.jump(); while (t && t.nodeName != "A") t = t.parentNode; if (t) this.show(evt, t); }, jump : function() { location.href = this.href; }, // つづく
- yyr446
- ベストアンサー率65% (870/1330)
javascript使用でよかったら、作ってみます。 とりあえずテキストの■、▲でいいんですね。
補足
テキストの■と▲でいいです。 ただ、将来的にはその■と▲を画像で代用したいと思うので 応用が利くようであればもっとうれしいです。 よろしくお願いします。
お礼
すごい興奮しました。 ありがとうございます。 イメージとしてはかなり理想に近いです。 ▲の表示位置の指定やデザイン性など 改良を加えたら面白いものができそうです。