• ベストアンサー

ボタン(画像)をクリックするたび表を切り替える方法

HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン(画像 W300px)の下に表A(簡単な<table>内にテキストがあるW300 H400くらいのもの)があって、 タイトルボタンをクリックするたびに表B、表Cに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.1

表自体をそれぞれDIVで囲んで、JavaScriptでvisibility: hidden、visibility: visibleを切り替えれば良いと思います。 デフォルトで、表Aをvisibility: visible、表Bと表Cはvisibility: hiddenに設定しておき、あとはJavaScriptのスタイルシート属性操作で、クリックするとごとに各表のvisibilityを変更すれば実現できます。 詳しいやり方は「JavaScirpt visibility」などでネットを検索すれば出てくると思いますよ。 ご参考まで。

関連するQ&A

  • 【初心者です】HP作成しています。ヘッド画像をクリックして、トップページへリンクのタグを教えてください。

    HTMLとCSSを勉強しながらHP作成している初心者です。 外部CSSを使ってHPを作ってるんですが、  ヘッド画像(W830px×H390px)をクリックしたら、トップページへ飛べるようにするには、CSS側とHTML側、それぞれどのようなタグにしたらいいのでしょうか?? 困っています! どなたか教えてください。よろしくお願いします。

  • formのsubmitボタンを画像にして、オンマウスで画像を切り替えた

    formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。 HTMLとCSSでHP制作しています。 formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると 画像の色を変えるという事をやりたいと思っています。 例えば赤ボタンをオンマウスで青ボタンにするという感じです。 ネット検索してボタンを画像に変える事は出来ました。 ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。 javascriptを使ったものを見かけたように思うのでこちらで質問してみました。 CSSで普通のリンクボタンの画像切り替えは出来るのですが、 formではそういうわけにはいかないのでしょうか? javascriptがよくわかならいのですが、そんな私にも出来るでしょうか? どこか参考サイトがありましたら、紹介して頂けるとありがたいです。 アドバイスよろしくお願い致します。

  • ボタンクリックで画像を替えたい

    はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像(400px×125px)の下に横並びでボタン(80px×25px)を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。

  • JavaScriptでボタンをクリックすると画像が変わる設定をするには?

    たとえば、1.gif - 2.gif , 3.gif - 4.gif,5.gif - 6.gif,7.gif - 8.gif,9.gif - 10.gif の画像をついにしてボタンとして利用するとします。 最初に表示されるボタンは 1.gif , 3.gif ,5.gif , 7.gif , 9.gif の5つです。 JavaScriptで1.gifボタンをクリックしたら、2.gifボタンに画像が変わり、 3.gifボタンをクリックしたら、4.gifボタンに画像が変わるように(残りの画像も同様)したいと 考えています。この時、1.gif , 3.gif ,5.gif , 7.gif , 9.gifのいずれかのボタンがクリックされた 時点で、直前に変更していた 2.gif , 4.gif ,6.gif , 8.gif , 10.gifのいずれかのボタンは最初のボタン の状態に戻したいと考えています。 どのようにJavaScriptを記述すると可能なのでしょうか。 1つのボタンをクリックすると別の画像に変わる方法は色々なHPを参考に↓の記述でなんとかできたのですが、 複数のボタンになるとどのように修正していけばうまくいくのかわかりません。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- imgnum=1; function changeImage(){ if(imgnum==1){ document.myimg.src="2.gif"; imgnum=2; }else if(imgnum==2){ document.myimg.src="1.gif"; imgnum=1; } } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="javascript:changeImage()"><IMG src="1.gif" name="myimg" border=0></A> </CENTER> </BODY> </HTML> 質問がややこしくてすみません。 方法をお分かりの方はどなたか教えてください。よろしくお願いします。

  • tableタグで作るような表をCSSで作る方法

    一つのページに表(横:600px、縦:155px)を20~30個くらい表示させたいのですが、tableタグを多用するとページが重くなると聞きました。 そこで、CSSを使って表を作ろうと思うのですが、どのように作れば良いのか分かりません。 ご存知でしたら教えてください。 私が作りたい表は下記になります。 XHTML 1.0 Transitional 横幅:600px 縦幅:155px 4行3列で、一番左の列の4行を繋げて(tableタグでの記述は<td rowspan="4">)一つの空間になっているのもの。 セルとセルの間隔は5pxのもの。 HTMLとCSSの記述を教えていただけると幸いです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 背景画像上にテキストを配置したボタンについて

    今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。(指定した縦横幅に合わせて背景画像がリサイズされるようにしたい) 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか? また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • htmlできれいな画像のような表を作りたいです。

    htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか? ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>

  • 画像の左端をクリックした時にJavascriptを動作させたい

    任意の縦横サイズの画像の左端の外側についてる幅4pxの枠をクリックすると特定の Javascriptメソッドを呼ぶHTMLコードを書きたいのですが、どうCSSと 組み合わせても枠が画像より短かったり逆にヤケクソに長くなったりして うまくいかないのですが、実際のところこのような芸当は可能なのでしょうか?

  • ボタンクリックでボタン画像を変えて、更に横に画像を

    最近ブログを始めて、html、cssを勉強しているのですが、分からないことがあるので質問させて頂きます。 私が作りたいのはボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっているというものです。 また、cssとhtmlでないのでしたらサイトへのアップや記載方法なども教えていただきたいです。 もしお分かりの方がいましたら、よろしくお願いします。

    • ベストアンサー
    • CSS
  • opacityなどで背景のみ不透明度にしたいです

    閲覧ありがとうございますm(_ _)m WEB制作に関してご質問させて頂きたいことがございます。 ヘッダー画像部分のHTML+CSSコーディングで下記のことをやりたいと考えています。 (1) ヘッダー画像の右上に角丸画像を貼る (2) 角丸画像(ホワイト)の中にタイトルを入れたい (3) ヘッダー画像をもとに角丸画像のみ不透明度を設定したい(タイトル文字は不透明度にしない) ソースは下記になります。 【HTML】 <div id="header"> <div id="headertext"><h1>タイトル</h1> <h2>- サブタイトル -</h2> </div> </div> 【CSS】 #header { margin: 0; width: 1200px; height: 270px; overflow: hidden; padding: 0; background-image: URL("ヘッダー画像") } div#headertext{ position: relative; top: 20px; left: 630px; height: 60px; width: 550px; padding-right: 20px; padding-top: 10px; text-align: right; background-image: URL("タイトル用ホワイト画像"); /*opacity:0.5; background-color: #FFFFFF;*/ /* -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px;*/ } h1、h2のCSSは省略いたします。 (1)と(2)に関しては出来ていますが、(3)に関してはホワイト画像とタイトル、サブタイトル共に不透明になってしまって上手くいきませんでした。 よろしければご教示お願い致します。

    • ベストアンサー
    • CSS