今GoogleMapを使って、
左に地図があり、右にスクロールするリストがあるページを制作したいと思っています。
はてなマップの↓
http://map.hatena.ne.jp/t/Football#
ちず窓の↓
http://chizumado.jp/
上のサイトと同じことをしたいです。
インラインフレームを使わないで、スクロールする部分としない部分をする方法を知っている方、
または、はてなマップやちず窓みたいな
左に地図右にリストでリストを選ぶと地図に反映
といったページの作り方
(インラインフレームを使っていても可)
を、どちらか知っている方がいましたら、
教えてください。
お願いしますm(_ _)m
回答1の補足です。
overflow-xやoverflow-yについてはieのみがサポートとなっていますが、overflowについてはIE,ネスケ,Opera(とほほには書いてないがFirefoxも)対応しているはずです。
overflow:auto;
とすることで、はみ出す部分があればスクロールバーが出現します。
div要素などをいれて幅を100%以上に指定したり、大きい画像をいれたりすると横スクロールバーが出る可能性もありますが、通常のテキストだけならまず問題ないと思います。
とほほのスタイルシート入門:overflowの解説
テーブルにスクロールバーをつけてやるのはどうでしょう?
スタイルシートに↓こう記述すればOKです。
overflow-y: scroll
溢れた分はスクロールする、という意味です。
2つ目の質問については、インラインフレームを使って
地図ページの名前を tizu 、 メニューを menu と名づけたとして
menuの方のリンクに、
<a href="http://..." target="tizu">としてやればOKです。
地図に、ポップアップを表示するとか位置移動するとかのやり方を
質問されているのであれば的外れな回答ですいません。
ちず窓については、javascriptで右で指定した座標を
左の地図で真ん中に持ってくるような処理をしてるみたいですね。
レスありがとうございます。
overflow-y: scrollは、
IE独自の仕様でブラウザ依存しますよね。
ブラウザ依存しないで、スクロールさせる方法はないでしょうか?
ちず窓については、javascriptで右で指定した座標を
>>左の地図で真ん中に持ってくるような処理をし
>>てるみたいですね。
thunder9119 さんは、
ちず窓やはてなマップはインラインフレームを使っていると思いますか?
よかったら見解を教えてください。
GoogleMapAPIを使います。
下記のサイトなどで設置方法が説明されています。
http://www.ryo.com/ryo/2005/11/28/147/
以下で自分のkeyを取得する必要があります。
レスありがとうございます。
GoogleMapは現在使っていますので、
質問のような動作をさせる方法が知りたいです。
(スクロールさせる方法)
http://beginners.atompro.net/agss/006-010.html
上のURLの10番のテンプレートで、インラインフレームを使わないで、スクロールする部分を使ってあります。
スタイルシートで行っているようです。
スタイルシートはあまり詳しくないので、すみませんが解説はなしです。
こちらのサイト、
今回の質問だけではなく、
今後にすごい参考になりそうです☆
ありがとうございました。
回答1の補足です。
overflow-xやoverflow-yについてはieのみがサポートとなっていますが、overflowについてはIE,ネスケ,Opera(とほほには書いてないがFirefoxも)対応しているはずです。
overflow:auto;
とすることで、はみ出す部分があればスクロールバーが出現します。
div要素などをいれて幅を100%以上に指定したり、大きい画像をいれたりすると横スクロールバーが出る可能性もありますが、通常のテキストだけならまず問題ないと思います。
とほほのスタイルシート入門:overflowの解説
こちらを見て、解決しました。
ありがとうございますm(_ _)m
over-flowはブラウザ依存しないみたいですね‥
自分で調べてoverflow-yというキーワードが出てきて、
でも実行したらfirefoxで正しく動作しなかったため、深く調べないであきらめてしまいました。
もっとよく調べないといけませんね。
助かりました。
こちらを見て、解決しました。
ありがとうございますm(_ _)m
over-flowはブラウザ依存しないみたいですね‥
自分で調べてoverflow-yというキーワードが出てきて、
でも実行したらfirefoxで正しく動作しなかったため、深く調べないであきらめてしまいました。
もっとよく調べないといけませんね。
助かりました。