- ベストアンサー
クリック後、TABLEの幾つかのセルの色を変える
初めて質問させて頂きます。 現在ホームページを作成しています。 フレームでページを2分割して、片方がメニューバーのようなページでもう一つがメインページのような構成です。 こんな感じです。 <FRAMESET rows="20%,80%"> <FRAME name="top" src="menu.htm"> <FRAME name="bottom" src="top.htm"> <NOFRAMES> <BODY> <P>Please access this page by browser that supports the frame. </P> </BODY> </NOFRAMES> </FRAMESET> そしてmenu.htmにテーブでコンテンツを表示し、もう片方にTOP、PROFILE、BBS、DIARYとテーブルで仕切ってページを作成しています。 <TABLE border="1" bgcolor="gray"> <TBODY> <TR> <TD bgcolor="red"><A href="top.htm" target="bottom">TOP</A></TD> <TD><A href="profile.htm" target="bottom">PROFILE</A></TD> <TD><A href="bbs.htm" target="bottom">BBS</A></TD> <TD><A href="diary.htm" target="bottom">DIARY</A></TD> </TR> </TBODY> </TABLE> このとき、最初は"TOP"のセルがが赤くなっています。 ここでリンクとなっている"BBS"をクリックすると、そのセルの背景がredになり、その他のセルの背景はgrayのままで、次にDIARYをクリックするとDIARYのセルの背景がredになり、BBSはgrayになるというような事をやりたいのですが、良い方法はあるでしょうか？ ちなみにサーバの容量が非常に少ないので画像を使いたくないのですが、画像を使わざるを得ないでしょうか？ このカテゴリーで質問する内容では無いかもしれませんが、どなたか良いアドバイスを宜しくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- olda
- ベストアンサー率66% (2/3)
必要に応じて<script>～</script>内の ・ nPastId = "～"; の部分と メニューそれぞれにある ・ <td id="～"> 部分と ・ <a onclick="changeColor('～')"> 部分を修正してください。 <script language="javascript" type="text/javascript"> <!-- // 最初に選ばれているメニュー nPastId = "menu01"; function changeColor(nId) { if(document.getElementById) { document.getElementById(nPastId).style.backgroundColor = "gray"; document.getElementById(nId).style.backgroundColor = "red"; nPastId = nId; } } //--> </script> <table border="1" bgcolor="gray"> <tbody> <tr> <td bgcolor="red" id="menu01"><a href="top.htm" target="bottom" onclick="changeColor('menu01')">TOP</a></td> <td id="menu02"><a href="profile.htm" target="bottom" onclick="changeColor('menu02')">PROFILE</a></td> <td id="menu03"><a href="bbs.htm" target="bottom" onclick="changeColor('menu03')">BBS</a></td> <td id="menu04"><a href="diary.htm" target="bottom" onclick="changeColor('menu04')">DIARY</a></td> </tr> </tbody> </table>
お礼
こちらもご回答ありがとう御座いました！ 先程テストしましたが、こちらもばっちりです。 初期値にTOPのIDを持っていて（それが前回の値という感じになって）クリックされると前回の値が示すセルがgrayになり、クリックされたセルのIDのところがredになるという方法ですね。 あ！ そのクリックされたIDがPastIDになっていますね。 こちらの方法も非常にいい感じです。やはりgetElementById()を使用するんですね。 ありがとう御座いました。 モヤモヤが晴れて、本当にすっきりしました。
関連するQ&A
- フレームで、一回しか切り替わらない
フレームで、一回しか切り替わらない理由が分からずに困っています。 HTMLは、以下のように記述しています。 index.htmlファイルの内容： <html> <head> <title>フレームテスト</title> </head> <frameset cols="230,*"> <frame src="menu.html" name="subFrame"> <frame src="top.html" name="mainFrame"> <noframes> このページはフレーム対応のブラウザでご覧ください。 </noframes> </frameset> </html> menu.htmlの内容： <html> <HEAD> <title>掲示板</title> </HEAD> <body> <table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr> <td bgcolor="#99FF99"><a href="top.html" target="mainFrame"> メイン掲示板</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="aaa" target="mainFrame"> aaa</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="bbb" target="mainFrame"> bbb</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="ccc" target="mainFrame"> ccc</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="top.html" target="mainFrame"> TOPページにもどる</a></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- ＜緊急＞テーブルを使わないで作るには？
お世話になります。 <table width="740" cellspacing="0"> <tr valign="middle"> <td width="367"></td> <td></td> </tr> <tr valign="middle" bgcolor="FFFFCE"> <td> <a href="A073.htm" target="_parent" class="style132">・ あああ</a></td> <td> <a href="A017.htm" target="_parent" class="style132">・ いいい</a></td> </tr> <tr valign="middle" bgcolor="FFCCFF"> <td> <a href="A069.htm" target="_parent" class="style132">・ ううう</a></td> <td> <a href="A043.htm" target="_parent" class="style132">・ えええ</a></td> </tr> <td></td> </tr> <tr valign="middle"> <td></td> <td></td> </tr> </table> こちらをテーブルタグを使わない形に変更したいと思っています。 どなたかお知恵をお貸しください、よろしくお願いいたします。
- ベストアンサー
- HTML
- ■至急■html詳しい方 テーブル内のリンク書式
htmlでテーブル内にリンクを貼った場合の書式設定が 反映しません。 下記のテーブル内のTOP , PROFILEなどの文字色、文字サイズを 変更したいのですが、<font size="20">と書いても全く反映しません。 書く場所が悪いのでしょうか？ <html> <head> <title>memuページ</title> <!--<link href="./style.css" rel="stylesheet" type="text/css">--> <body link="WHITE" vlink="WHITE" alink="WHITE"> </head> <body> <BR> <table width="1200" border="0" cellspacing="0" cellpadding="5" align="center"> <tr bgcolor="pink"><font size="20"><td colspan="2"><b> <td width="250" height="30"><a href="./main.html" target="main">｜TOP｜ <td width="250" height="30"><a href="./profile.html" target="main">｜PROFILE｜ <td width="250" height="30"><a href="./shop.html" target="main">｜SHOP｜</td> <td width="250" height="30"><a href="./help.html" target="main">｜HELP｜</td></font> </table> </body> </html>
- ベストアンサー
- HTML
- tableセルに色を付ける
tableセルに色を付けます。 で、行で指定しようとtrタグにbgcolorをいれました。 ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> <td>あ</td> </tr> <tr> <td>い</td> </tr> <tr bgcolor="red"> <td>２</td> <td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルのセルの高さ
テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルＡ</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルＢ－１</TD><TD>セルＢ－２</TD></TR> <TR><TD>セルＢ－３</TD><TD>セルＢ－４</TD></TR> <TR><TD>セルＢ－５</TD><TD>セルＢ－６</TD></TR> <TR><TD>セルＢ－７</TD><TD>セルＢ－８</TD></TR> <TR><TD>セルＢ－９</TD><TD>セルＢ－10</TD></TR> <TR><TD>セルＢ－11</TD><TD>セルＢ－12</TD></TR> <TR><TD>セルＢ－13</TD><TD>セルＢ－14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルＣ</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルＡとセルＣの境界はセルＢの高さの真中くらいに なると思います。 それで、セルＡとセルＣの内容は固定なのですが、セルＢ内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルＢの大きさにかかわらず、セルＡの高さを固定したいのです。 セルＣはセルＢの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか？ セルＡにHEIGHT指定してもなぜか、無視（？）されてしまいます・・・ よろしくお願いします。
- 締切済み
- HTML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- CSS：横一列にリンクする文字の見栄えをよくする
リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。 ■HTML <table> <tr> <td><a href="">プロフィール(Profile)</a></td> <td><a href="">日記(Diary)</a></td> <td><a href="">絵(Picture)</a></td> <td><a href="">疑問(Question)</a></td> </tr> </table> このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- html テーブルのセルにリンクを張りたい
これは正しいですか？ <a href="url"><td></td></a> 正しくないとすれば、どうすべきでしょうか？テーブルの特定のセルをクリックした時にページを移動できるように したいのです。できらばjavascriptなしで色々なブラウザで動くものがよいです。
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルのセルの文字のセンターについて
セル内の文字のセンターをトライしていますが、出来ていたものがダメです。 <tr> <td colspan="2" width="100" height="30" align=center><a href="flight.html">ああああ</a></td> </tr> ２つのセルを１つにする前は <tr> <td width="100" height="30" ><a href="flight.html"><center>ああああ"></center></a></td> </tr> で、あああは中央にできたのですが、セルを１つにしたら左側に、align=middleを使用すると少し右に移動するだけです。 どのようにしたらいいのか教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
- iPhone13miniから普段Air printの方法で印刷していますが、突然印刷できなくなりました。IPアドレスの設定がうまくできないようです。対処方法を教えてください。
- お使いのiPhoneからブラザーの印刷機にAir printで印刷していたのですが、IPアドレスの設定がうまくできず印刷できなくなりました。対処方法を教えてください。
- iPhone13miniを使ってAir printで印刷していましたが、突然印刷できなくなりました。IPアドレスの設定がうまくできません。どうすれば印刷できるようになるでしょうか。
お礼
早速のご回答ありがとうございます！ 先程テストしてみましたが、ばっちりです。 私のやりたい事が、完璧に表現できました。 あ～すっきり！ ジャバスクリプトの関数はほとんど知らないので getElementById()なんていう関数があるとは知りませんでした！ クリックされたら全てを一度grayにして、IDの一致する所だけ色を変えるという方法ですね。 本当にありがとう御座いました。