Javascriptのサンプルを探しています。

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/08/25 20:12:47
  • 終了:2006/09/01 20:15:13

回答(2件)

id:takemori No.1

takemori回答回数29ベストアンサー獲得回数22006/08/26 00:20:09

ポイント35pt

レイヤー(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

id:redhat

ありがとうございます。

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

2006/08/26 10:12:50
id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182006/08/29 16:32:37

ポイント35pt

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

だけであれば、イベント発生させる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

id:redhat

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

2006/08/29 23:17:04

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません