- 締切済み
javascriptでcssを制御
ページに配置しているボタンをクリックすると、別ページが開く。といったものを作ろうと思っています。 イメージはこんな感じです。（プロフィールボタンをクリックでページが開く）http://caesar.hikaritv.net/ イメージしているサイトはFLASHですが、実際にはhtmlにpositionでレイヤーを重ねて、最初はレイヤーをvisivilty:hidden;などで非表示にし、ボタンをクリックするとcssを書き換えて表示させる。といった事が出来ればと思っています。 どなたか、教えてください。 宜しくお願いいたします。
- mart5633
- お礼率28% (2/7)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- xindex
- ベストアンサー率55% (5/9)
<style type="text/css"> div.show { display:block; } div.hide { display:none; } </style> <script type="text/javascript"> function HideShow(id) { var div = document.getElementById(id); if (div.className == "show") { div.className = "hide"; } else { div.className = "show"; }} </script> </head> <body> <a href="#" onclick="HideShow('itiban')">一番表示非表示</a> <div class="hide" id="itiban">いちばん</div> みたいなんかな？ 動作するかみてないです・・・
<html> <body> <div> <div id="ue" style="background-color:#eef; width:600px;height:100px">abc</div> <div id="hidari" style="background-color:#8f8;width:420px;height:500px;float:left;padding:4px"> 適当にうんたらかんたら<br> <img src="tekitou.jpg" width="200px" height="150" alt="うそだぴょ～ん"><br> そして適当にまた文字が羅列 </div> <div id="migi" style="background-color:#fee;width:180px;height:500px;float:left"> <a href="#" onClick="view('hidari','profile')">Profile</a> </div> <div style="clear:both"></div> </div> <div id="profile" style="background-color:#eff;text-align:center;position:absolute;left:0px;top:0px;display:none;"> そらりゃ～愛人はいっぱいいるさ！<br> でも金はない。<br> そしてなにより、教えてあげたのに<br> 礼さえ言わないやつは嫌いだ！<br> <img src="tekitou2.jpg" width="200px" height="350" alt="これが俺の正体だ！"><br> <a href="#" onClick="kesu('profile')">消す</a> </div> <script> f=0; function view(vpage,hpage){ if(f) return; var vobj = document.getElementById( vpage ); var hobj = document.getElementById( hpage ); hobj.style.top = vobj.offsetTop; hobj.style.left = vobj.offsetLeft; hobj.style.width = vobj.offsetWidth; hobj.style.height = vobj.offsetHeight; new setOpacity(hpage,0,5,30); hobj.style.display='block'; f=1; } function kesu(hpage){ if(!f)return; new setOpacity(hpage,100,-5,30); f=0; } function setOpacity( id, opacity, step, wtime ){ this.opacitySet = function(n){ if( n != undefined ) this.opacity = n; this.obj.style.filter = 'alpha(opacity='+ this.opacity+ ')'; this.obj.style.MozOpacity = this.obj.style.opacity = this.opacity / 100; } this.go = function(){ this.opacitySet( this.opacity += this.step ); if( this.opacity<0 ) { this.opacitySet(0); clearInterval( this.tmid ); return; } if( this.opacity>100 ) { this.opacitySet(100); clearInterval( this.tmid ); return; } } if( id != undefined ) this.obj = document.getElementById( id ); if( opacity != undefined ) this.opacitySet( opacity ); if( step != undefined ) this.step = step; if( wtime != undefined ) this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } </script>
