- 締切済み
オンマウスでテーブルの背景画像変更
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- cyokokichi
- ベストアンサー率21% (32/152)
ボタンのように見えれば良いのですか。 それなら画像を使わずに枠線で表現したらそれなりに見えます。 スタイルシートは使います。 <head> <style type="text/css> <!-- /*通常時のaのスタイル*/ .menu a { display:block;/*←これをいれると前後が改行されます。*/ width:100px;/*←ここで枠の幅を調整します。*/ height:20px;/*←ここで枠の高さを調整します。*/ border:2px outset;/*←枠全体が盛り上って見える枠線*/ } /*オンマウス時のaのスタイル*/ .menu a:hover { display:block; width:100px; height:20px; border:2px inset;/*←枠全体が押し下げられて見える枠線*/ } //--> </style> </head> <body> <table class="menu"> <tr><td><a href="aaa.html">aaaa</a></td> <td><a href="bbb.html">bbb</a></td> <td><a href="ccc.html">ccc</a></td> <td><a href="ddd.html">dddd</a></td> </table> </body> スタイルシートもJavascriptもナシではムリかと思います。
- 9arabi
- ベストアンサー率32% (140/433)
No.2です ああ、そういうやり方でしたら、やっぱりスタイルシートを使うのが一番便利ですよ。 最初から全てをスタイルシートでデザインするのは難しいと思いますが、部分的に使っていくことで少しずつ覚えるものです。壁を作ってみないで例を見ながら試してみてはいかがでしょうか。 ※ただ、試してみたんですが、<table>を使って同じことをするとNetscapeで動かなかったので、<ul>タグを使っています。その分ちょっとややこしくなっているようにも見えますが、多分そのまま使ったらいけます。 <html> <head> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body> <div id="sidemenu"> <ul> <li><a href="./index.html">ホーム</a></li> <li><a href="./link1.html">リンク１</a></li> <li><a href="./link2.html">リンク２</a></li> <li><a href="./link3.html">リンク３</a></li> </ul> </div> </body> </html> で、外部のCSSファイル「main.css」には以下のように書きます。 --------------------- #sidemenu a{ background:#ffffff url(bg1.gif) no-repeat; } #sidemenu a:hover{ background:#ffffff url(bg2.gif) no-repeat; } #sidemenu li{ list-style-type:none; // 列挙の「・」を見せない padding:5px; // <li>要素のpaddingを指定 width:90px; // <li>要素の幅を指定 height:24px; // <li>要素の高さを指定 } --------------------- HTMLのほうに<div id="sidemenu">というのがありますよね。 「id="名前"」で、スタイルシートを指定するときの呼び名を決めているんです。id="名前"という書き方の場合、同じページにこれをもつタグは１つしかないということです。 （参考：「class="名前"」という書き方の場合、同じページにこれをもつ同じタグが複数存在してもよい） そして、スタイルシートのファイルの中で、 #sidemenu a と書いてあるのは、 id="sidemenu"と名前のついたタグの要素の中の<a>タグ要素に、以下のスタイルを指定しますよ、 という意味です。 #sidemenu a:hover は、マウスオーバーで以下のスタイルにします という意味になります。 background:#ffffff url(bg2.gif) no-repeat; と書いてあるのは、 backgroundについて指定しますよ、とまず述べた上で、 :のあとにそのスタイルを指定しています。 続いて、 背景色、それから画像の場所（これはスタイルシートファイルのある場所から見た相対パス）、繰り返すかどうか をそれぞれ指定していることになります。 #sidemenu li 以下の部分はこれを書かないと、列挙のための「・」が表示されてしまうので、それをなくすために書いています。 とりあえず、ここに書いた[url(bg1.gif)]の部分を変更すれば、期待した動きをすると思います。 当方Win環境で、Opera6、Netscape6、IE6、Firefox0.9にて動作を確認しました。 以上、ご参考まで。
- 9arabi
- ベストアンサー率32% (140/433)
余談になるかもしれませんが（一部のブラウザでは反応しないので）。 CSSを利用して次のようにすることもできます。 <html> <head> <link rel="stylesheet" href="./main.css" type="text/css" /> </head> <body> テーブルの背景画像を変更する <table id="chgbg"> <tr> <td>あいう</td> <td>えおか</td> </tr> </table> </body> </html> で、<head>部で指定してあるmain.cssには #chgbg{ background-image:url(../img/bg1.JPG); } #chgbg:hover{ background-image:url(../img/bg2.JPG); } と書いておく方法です。 こちらのやり方の方が動作は軽いように思われます。 :hoverは基本的に a要素に反応するようになっていますので、<a>タグをなんらかの形ではさみこめるならこういうのもありでしょうが。 参考までに。
- cyokokichi
- ベストアンサー率21% (32/152)
これでいかがでしょうか。 <body> <table id="tb" background="http://abc.com/haikei.png" onmouseover="a()" onmouseout="b()"><tr><td>aaaaaaaa</td></tr> </table> </body> <script type="text/JavaScript"> <!-- function a(){ document.getElementById("tb").setAttribute('background',"http://abc.com/gazou.png"); } function b(){ document.getElementById("tb").setAttribute('background',"http://abc.com/haikei.png"); } //--> </script> DOMで検索してみてください。 詳しい情報が見れると思います。
関連するQ&A
- オンマウスで異なるセルなどの背景を変える方法
(1)オンマウスで、オンしているセルではないセルの背景画像を変える方法と、 (2)オンマウスで、セルではなく、テーブル自体の背景画像を変える方法を 教えて下さい。 (1) <table><tr> <td>1111</td> ←このセル(文字)にオンマウスして <td>2222</td> <td>3333</td> ←このセルの背景を変える </tr></table> (2) <table background="*****.jpg"><tr> <td>1111</td> ←このセル(文字)にオンマウスしてテーブルの背景を変える <td>2222</td> <td>3333</td> </tr></table> こちらで使用しているブラウザはSafari2.0.4とFireFox3.0.8です。 お願いします。
- ベストアンサー
- HTML
- 画像をオンマウスでのメニュー
大き目の画像に触れてしばらくすると左上に「イメージの保存」「イメージの印刷」などのメニューが出てきますよね？ それを出さないようにする為に、普通ならテーブルの背景にするなどして解決するのですが、今回はオンマウスで画像を変えたいと思っているのです。 すると、画像が変わった二枚目でメニューが出てきてしまいます。 これが出てこないようにするにはどうしたらいいでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- HTML
- テーブルに背景画像を入れたいのですが……
CS5でホームページを作っていますが、CSSとかhtmlはまったくといっていいほど理解していません。 テーブルを挿入して組みあせているだけの初歩的な作り方なのですが、いろいろわからないことばかりです。 質問ですが、ページ全体への背景画像はできるのですが、テーブルに対する背景画像の設定は可能でしょうか。 下記のページのテーブル内の挿入画像をいくつか背景画像にして、その上にテキストを入れたいのです。 http://www.kajimaya.info/ http://ryukyugeino.jpn.com/ すみませんが、超初心者向きのご教示をいただければありがたいです。 どうかよろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- テーブル外のテキストをクリック → テーブルの背景画像を変更させるには？
IE、macで動作可能な状態に作りあげたいです。 テーブル外にあるテキストのある部分をクリックする度に、 テーブル内の【背景】画像が変わるようにしたいのです。 テーブル上の画像ではなく、テーブル自体の背景を変えられる方法がなかなか見つかりません。 もし出来るようなら、ぜひ教えてください！
- ベストアンサー
- JavaScript
- 画像クリックでテーブル内背景画像変更
超初心者です。 似たような質問から、自分なりにアレンジしてみたのですが、うまくいきません。 背景なしのテーブル内に配置したA画像をクリックすると、 そのテーブルの背景がA画像になる、というふうにしたいです お分かりになる方、教えてください。 よろしくお願いしたします。
- ベストアンサー
- JavaScript
- TABLEの背景画像をCSSに変更したい。
今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ＜図２：backgroud-imageによる指定＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ■■■ ┐ ■■■ A' ■■■ ┘ □□□ ┐ □□□ B' ┘ ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││ ││ ││ ││ ││イ││ロ││ハ││ ││ ││ ││ ││ │└─┘└─┘└─┘│ └─────────┘
- ベストアンサー
- CSS
- ドリームウィーバーでテーブルの背景色の変更方法を教えてください
ドリームウィーバーで作成したHPの背景色の変更はできますが テーブルを作成した場合、 そのテーブルの背景だけを他の色や画像を使用したいのですが どのように指定すればテーブルの背景をへんこうできますか？ 今は直接タグを変更しております よろしくお願いします
- ベストアンサー
- ホームページ作成ソフト
- テーブルの中の背景画像
windowsでHTMLを制作しています。 テーブルの中にテーブルを入れてレイアウトしているのですが、 大きいほうのテーブルに背景画像を指定、 中に入れた小さいテーブルには下の背景をそのまま反映させたいと思います。 IEでは問題なく表示されますが、ネスケで見ると、 小さいテーブルにもダブって背景画像が出てきてしまいます。 解消するタグはあるのでしょうか。
- ベストアンサー
- HTML
- テーブルの背景画像をランダムに。
こんばんは。 よく、背景画像がランダムで出てくるのってありますよね。 あれをテーブルの背景では出来ないでしょうか。 <TABLE background="画像のURL">の背景を ランダムにするやつです。 宜しくお願いします。
- ベストアンサー
- HTML
- テーブルにオンマウスで文字色を変える方法を教えてください。
当方HPビルダーV9でHP作成中です。 最近やっとCSSなど使えるようになってきたので、様々試しているのですが、どうしても自力で実現できないため、知恵を貸してください<(_ _)> テーブル内に表示されている文字を、文字ではなくて周囲のテーブルにオンマウスで文字色を変更したいのですが、どのようなタグを組めばいいのでしょうか？ 該当部分には、上記の他に、テーブルにオンマウスでテーブルの背景色を変えるタグも組み込んでいます。 以下該当部タグです。 <TABLE style="filter:Alpha(opacity=40)"bgcolor="#f75563" width="100" height="100" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD align="center"onmouseover="this.style.backgroundColor='#ffffff'"onmouseout="this.style.backgroundColor='f75563'"><FONT color="#ffffff" size="-1">bulletin board</FONT></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがたいのですが、よく分かりませんスタイルシートは難しいです。 狙いは、ボタンなどが、オンマウスで引っ込む動作を作りたかったのです。それで、全てのメニューの画像を作るのは面倒で、付け足しにくいので、テーブルとして使用しようとしていたわけです。