人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptのサンプルを探しています。
GoogleMapでバルーンをクリックすると、スライドが表示されますが、あのような動きが実現できるサンプルを教えて下さい。
http://www.dhtmlgoodies.com/index.htmlの青いリンクをクリックすると広告が表示されて、スライドが出ますが、まさにこの動きのサンプルが欲しいです。

●質問者: redhat
●カテゴリ:コンピュータ インターネット
✍キーワード:JavaScript クリック スライド バルーン リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● takemori
●35ポイント

レイヤー(div)を絶対配置で配置して見えなくしておいて

文字などにonmouseoverイベント付けておいてdivを表示させるだけですよ。

クリックで表示させたいならonclickにするといいです。

<a onmouseover="document.getElementById('slide').style.display='inline'">ここにマウスがのると表示</a>

<div id=slide style="display:none;position:absolute;top:100px;left:100px;">スライド</div>

のような感じです。

こちらにサンプルと詳しい解説なども載ってます

http://www.fromdfj.net/javascript/help2.html

◎質問者からの返答

ありがとうございます。

表示された枠の中にリンクを記述したり、マウスオーバーしているときに枠が消えないようにしたいのですが、そういったサンプルはありますでしょうか?


2 ● susie-t
●35ポイント

>表示された枠の中にリンクを記述したり、マウスオーバーしているときに枠が消えないようにしたい

だけであれば、イベント発生させるspan要素の中に、リンクを含んだdiv要素を記述するのが簡単だと思います。以下は1の方の回答を継承したサンプルです。表示位置を動的にするため要素位置取得関数を使用しています。

<html>
<head>
<title></title>
<script>
//要素位置取得関数
function getLocation(elem, XorY){
 var offset = (XorY.toUpperCase() == "Y") ? "offsetTop" : "offsetLeft";
 var ret = elem[offset];
 var pa = elem.offsetParent;
 while(pa){
 if(pa[offset]) ret += pa[offset];
 pa = pa.offsetParent;
 }
 return ret;
}
//メニュー表示
function showMenu(obj, menuId){
 var menu = document.getElementById(menuId);
 menu.style.display = '';
 menu.style.left = getLocation(obj, "X") + "px";
 menu.style.top = getLocation(obj, "Y") + 15 + "px";
}
//メニュー非表示
function hideMenu(menuId){
 var menu = document.getElementById(menuId);
 menu.style.display = 'none';
}

</script>
</head>
<body>

<span onmouseover="showMenu(this, 'slide');"
 onmouseout="hideMenu('slide');">

>>ここ<<

<div id="slide" style="display:none;position:absolute;">
<a href="http://www.hatena.ne.jp">はてなへのリンク</a>
</div>

</span>

にマウスがのると表示します

</body>
</html>

top位置指定に使用している「15」という値は(悪い意味で)適当です。フォントの大きさによっては重なったり離れたりします。また、離れた場合、見出しからもメニューからもカーソルが外れるとその時点でメニューが消えます。この辺りは改良の余地ありです。

更に、スライドアニメーションやドラッグアンドドロップ、要素の画面位置によるメニューの表示位置調整等を実装しようとするとかなり複雑になります・・・。

ぞんざいですが、参考になれば幸いです。

ダミーURL:http://q.hatena.ne.jp/answer

◎質問者からの返答

サンプルまでご提示いただき、ありがとうございます。早速試してみます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ