javascriptでURLにマウスオーバー

締切済

質問者：mtmt1984
質問日時：2010/12/02 22:10
回答数：4件

言語は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の関数はできないようです。
何か良いアイデアがありましたら教えてください。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： yyr446
回答日時：2010/12/03 15:54

　テキストの■、▲でやって見ました。

サンプル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

に置きました。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/12/03 17:20

No.3

回答者： fujillin
回答日時：2010/12/03 15:29

// つづき

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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/12/03 17:07

No.2

回答者： fujillin
回答日時：2010/12/03 15:27

サンプルとして。

仕様が不明なので、いい加減です。
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;
},

//　つづく