締切済み

javascriptでURLにマウスオーバー

2010/12/02 22:10

言語は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)

2010/12/03 15:54 回答No.4

　テキストの■、▲でやって見ました。サンプル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 に置きました。

質問者

お礼 2010/12/03 17:20

すごい興奮しました。ありがとうございます。イメージとしてはかなり理想に近いです。 ▲の表示位置の指定やデザイン性など改良を加えたら面白いものができそうです。

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2010/12/03 15:29 回答No.3

// つづき 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>

質問者

お礼 2010/12/03 17:07

どーもありがとうございました。参考にします。

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2010/12/03 15:27 回答No.2

サンプルとして。仕様が不明なので、いい加減です。 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; }, //　つづく

ログインすると、全ての回答が全文表示されます。