イメージとしては下の図のような感じ
div1にメイン情報を載せて、div2にサブ情報を載せる感じで。
ボタンを押すと div2を出したり消したりできるようにしてみたかった。
下のコードをhtmlファイルとして作れば動くはず。
div_sub.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div id="main_contents"></div> <div id="sub"> <div id="sub_botton"> <div id="left_botton" class="botton">⇒</div> <div id="bottom_botton" class="botton">↑</div> </div> <div> </body> <style type="text/css"> html, body { margin: 0; } #main_contents { width: 440px; height: 600px; position: relative; border: none; background-color: #CCAA00 } #sub { width: 160px; height: 600px; position: absolute; top: 0px; left: 440px; background-color: #99cc00 } #sub_botton { width: 90px; height: 24px; position: absolute; bottom: 0px; right: 0px; } .botton { font-size:10px; font-family:Comic Sans MS; font-weight:normal; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; border:1px solid #d02718; padding:9px 18px; text-decoration:none; float:left; background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) ); background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% ); background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f'); background-color:#f24537; color:#ffffff; display:inline-block; text-shadow:1px 1px 0px #810e05; -webkit-box-shadow: 1px 1px 0px 0px #f5978e; -moz-box-shadow: 1px 1px 0px 0px #f5978e; box-shadow: 1px 1px 0px 0px #f5978e; }.botton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) ); background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% ); background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537'); background-color:#c62d1f; }.botton:active { position:relative; top:1px; } </style> <script type="text/javascript" code="subs_code"> // *********** subを動かすjquery******* $(function(){ $("#left_botton").click(function(){ if($("#sub").width() == 160){ // close sub $("#main_contents").width(600).css({cursor:"auto"}); $("#main_contents").height(600).css({cursor:"auto"}); $("#sub").css({top:"600px", left:"600px"}); $("#sub").width(0).css({cursor:"auto"}); $("#sub").height(0).css({cursor:"auto"}); $("#bottom_botton").text("↑"); $("#left_botton").text("←"); }else{ // open sub $("#main_contents").width(440).css({cursor:"auto"}); $("#main_contents").height(600).css({cursor:"auto"}); $("#sub").css({top:"0px", left:"440px"}); $("#sub").width(160).css({cursor:"auto"}); $("#sub").height(600).css({cursor:"auto"}); $("#bottom_botton").text("↑"); $("#left_botton").text("⇒"); } }); $("#bottom_botton").click(function(){ if($("#sub").height() == 160){ // close sub $("#main_contents").width(600).css({cursor:"auto"}); $("#main_contents").height(600).css({cursor:"auto"}); $("#sub").css({top:"600px", left:"600px"}); $("#sub").width(0).css({cursor:"auto"}); $("#sub").height(0).css({cursor:"auto"}); $("#bottom_botton").text("↑"); $("#left_botton").text("←"); }else{ // open sub $("#main_contents").width(600).css({cursor:"auto"}); $("#main_contents").height(440).css({cursor:"auto"}); $("#sub").css({top:"440px", left:"0px"}); $("#sub").width(600).css({cursor:"auto"}); $("#sub").height(160).css({cursor:"auto"}); $("#bottom_botton").text("↓"); $("#left_botton").text("←"); } }); }); </script> </html>
.botton の設定はジェネレータから。
初めはsubの有無を変数で管理しようと思っていたが、
jQueryの変数でフラグ管理するのは、なかなか厄介そうだなと思い、
divのサイズをflag変数代わりに用いてます。
きっとうまいやり方がほかにもあるはず。
使い方としては、googleストリートビューをdiv1に乗せて、地図をdiv2に載せてみるとか。
div1に全体写真、div2に拡大写真を貼り付けてみるとか