• 締切済み

javascriptでcssを制御

ページに配置しているボタンをクリックすると、別ページが開く。といったものを作ろうと思っています。 イメージはこんな感じです。（プロフィールボタンをクリックでページが開く）http://caesar.hikaritv.net/ イメージしているサイトはFLASHですが、実際にはhtmlにpositionでレイヤーを重ねて、最初はレイヤーをvisivilty:hidden;などで非表示にし、ボタンをクリックするとcssを書き換えて表示させる。といった事が出来ればと思っています。 どなたか、教えてください。 宜しくお願いいたします。

みんなの回答

  • xindex
  • ベストアンサー率55% (5/9)
回答No.2

<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> みたいなんかな？ 動作するかみてないです・・・

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.1

<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>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • CSS+JavaScript

    下記サイト http://www.dreamvs.jp/pc/ の上部にあるCSS+JavaScriptの動的なテーブル？のような物 を作りたいと思っています。 (FLASHは考えてません) ただ、左側にあるボタンを切り替わる画面の下に配置して、 上部の切り替わる部分を大きく表示したいと思っております。 ボタンを下に配置してJavaScriptで動かすことは可能でしょうか？ よかったらボタン下に配置したCSSのソースをアドバイスして頂けるとうれしいです。 詳しい方、よろしくお願いします。

  • JavaScriptについて教えてください。

    JavaScriptについて教えてください。 ringo.html、orange.htmlがあります。 それぞれに、テキストボックスと、submitボタンが一つずつあります。 行いたいことですが、 どちらかの、submitボタンをクリックすると、 それぞれの、テキストボックスの値を表示したいです。 ※hiddenを使用して実現したいです。 【イメージ】 ringo.htmlのテキストボックスに「100」を入力 orange.htmlのテキストボックスに「200」を入力 いずれかの、submitボタンをクリックすると ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ringoの入力値は、１００です。 orangeの入力値は、２００です。 _＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ といったイメージです。 よろしくお願いします。

  • やーまん

    はじめまして！質問お願いします。 一つのページの中に重なり合う（レイヤー）が三つ有り、その三つの（レイヤー）の表示を切り替える為の[ボタン]が三つあります。 （レイヤー1）を表示させる時は[ボタン1]をクリックして（レイヤー2）（レイヤー3）を非表示に。 （レイヤー2）を表示させる時は[ボタン2]をクリックして（レイヤー1）（レイヤー3）を非表示に。 （レイヤー3）を表示させる時は[ボタン3]をクリックして（レイヤー1）（レイヤー2）を非表示に。 という具合です。 ここまでは問題無いのですが、他のページから上記のページにリンクしてくる時に、今の状態だと上記の三つの（レイヤー）の中で一番上にある（レイヤー1）が強制的に最初に表示されます。 これを、リンクしてくるページによって最初から（レイヤー２）を表示させたり（レイヤー３）を表示させたり、リンクしてくるページによって最初に表示される（レイヤー）を切り替えたいのです。 【他のページ”（レイヤー2）を最初に表示させたい内容”】－<リンク>→【上記のページ”最初から（レイヤー2）が表示される”】 【他のページ”（レイヤー3）を最初に表示させたい内容”】－<リンク>→【上記のページ”最初から（レイヤー3）が表示される”】 という具合です。 何か良い方法がお分かりの方が居ましたら、どうかご教授ください。よろしくおねがいします。 レイヤーは<div id="ｘｘｘ">～</div>の事を指しています。 レイヤーの表示の切り替えはdreamweaberMXのビヘイビアパネルで作成しました。

  • フラッシュで開いたサブ画面を閉じるやり方

    Flash8でwebデザインをしております。 作成ページＡ内にコメントボタンを設置。 コメントボタンをクリックするとＡページ内に、コメントが表示される（レイヤー上部イメージ） 開いたコメントには、「close」ボタンがあり クリック操作でコメントを閉じて Ａページを表示（Ａページはコメント表示の際は、コメントで4分の１が隠れている このような動作をイメージしてますが 「close」ボタンのアクションスクリプトがわかりません。 どなたかご存知の方は教えていただけますでしょうか。 ライトボックスだと、比較的容易なのですが 別画面から、Ａページへの飛込み、表示から動的アクションがあり コメントボタンが表示して静止する。一連の動作ですので できれば、フラッシュで行いたいです。 Ｆｌａｓｈ８で行っています。

  • table内のCSS制御

    cgi等で自動生成するテキストが表示されるtableタグをCSSで成形しようとするのですが、長いテキストの時に2行にするにはどのようにしたらよいのでしょうか。 ご教授いただけますとたすかります。 または、一番希望しているのは、難しいかもしれませんが、tableの幅をオーバーするテキストが生成されたとき自動的にその部分を表示しないことがよいのです。例えば　「あいうえおあいう・・・・」　というイメージです。 現在作ってみたCSSは、下記になります。 clear:both;　と　position:relative;　は、外してみたり いろいろ試してみました。 また、.whatsnew_block　もコメントアウトしてましたが 出来ませんでした。 －－－－－－－－－－－－ div#contents .whatsnew_block { clear:both; margin:0px 0px 20px 0px; } div#contents .table { clear:both; position:relative; width: 190px; margin:10px 0px 0px 0px; } div#contents .table td { padding:1px 5px 1px 5px; } div#contents .table td image { margin:0px 0px 0px 0px; }

  • CSSデザインでのフレーム的な使い方

    CSSでのページデザインにおきまして、例えば右にリンク・ナビゲーションバー、左にメインページを配置した場合（divで左右に分割）、リンクをクリックしたとき該当するページをメインページに表示させるにはどのようにするのかお教えください。また参考CSSでも結構です。ご存知の方よろしくお願いいたします。 当方はＣＳ５を利用しています。（←ほとんど機能を理解していません。）

    • ベストアンサー
    • HTML
  • FLASH ActiveXコントロール　FLASH　Playerセキュリティ

    FLASHでカーソルに反応し、クリックするとURLにジャンプするボタンを作りました。 Dreamwever8にて配置→プレビューしたところ、 『セキュリティ保護のためこのコンピューターにアクセスする可能性のあるスクリプトやActiveXコントロールを実行しないよう、制御されています』と表示されました。『ここをクリックしてください』と出ているので、クリックすれば表示されますが、配置したFLASHボタンをクリックしようとするとFLASH　Playerセキュリティが働き、停止してしまいます。設定し直せば可能でしょうが、 Yahooのトップページの右側にある広告FLASHように、特にそのような設定をしなくても不特定多数の人が閲覧できるようなFLASHにするにはどのような設定をすればいいのですか？ ちなみに　私はFLASH８を使っています。

    • ベストアンサー
    • Flash
  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • CSSでの擬似インラインフレーム

    CSSでの擬似インラインフレームでのサイトを作成しています。 ページ全体枠を900px×650pxで左右上下の中央表示にし、 左側にナビゲーション、右側にコンテンツを配置しています。 右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。 次に、クリックした際に右側のコンテンツ部分の表示移動が パッと入れ替わるのではなく、スルスルと画面が推移するなめらかスクロールで場面が移動しているように見せたいのですが スクロールのjavascriptはこちらのサイト（http://lab.centralscrutinizer.it/the-tiny-scrollings/）でダウンロードさせていただいたファイルを設置したのですがパッと画面表示が変わるのみでスルスルっと動いてくれません。。。 私はjavascriptの記述知識がないためどうすればよいのかわからず ご質問させていただきました。 どうすれば良いのでしょうか。 どなたかお助けくださいませ。 よろしくお願いします！

    • ベストアンサー
    • HTML
  • CSSの設定

    CSSの初心者です。 両端に背景色が表示されるようなページを作りたいです。 どんな幅の画面でも中央にコンテンツが中央に配置されるようにしたいです。どのようにCSSを記述すればいいでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する