• ベストアンサー

オンマウスで異なるセルなどの背景を変える方法

(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です。 お願いします。

noname#250302
noname#250302
  • HTML
  • 回答数2
  • ありがとう数4

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

こんな感じで・・・ <script> function change(obj){ var p=obj.parentNode; while(p){ if(p.nodeName=="TABLE") break; p=p.parentNode; } p.style.backgroundImage="url(****.jpg)"; } </script> <table> <tbody> <tr> <td onMouseover="change(this)">1111</td> <td>2222</td> <td>3333</td> </tr> </tbody> </table>

noname#250302
質問者

お礼

おおっ、マウスオーバーでちゃんとテーブルの背景が変わりました! ありがとうございます!(>∀<) 他の場合など疑問が出てきたので(&私からのレスが遅くなってしまいそうなので)、改めて質問し直したいと思います。

その他の回答 (1)

回答No.1

あなたのいう「オンマウス」って、OnMouseoverなのかOnMouseout なのかOnMousedownなのかOnMouseupなのかOnMousemoveなのか、そ こをまず明らかにしましょう。ちなみにアウトマウスとかインマウ スとかはありません。 まぁ、どれでもヤルことは一緒なんですけどね。まず、引数でidと ファイルを指定して背景を設定するjavascriptを書きます。そうで すね、ありがちですがChngBg(id,file)とかにしましょうか。で、 <table id="hoge"><tr> <td id="foo" onMousexxxx="ChngBg("baa","gaa.png">1111</td> <td>2222</td> <td id="baa">3333</td> </tr></table> とでもすれば、fooでマウスがどうにかなったときにbaaの背景が gaa.pngに変わります。そこら中に仕込んどくとしっちゃかめっ ちゃかで面白いですね。 で、ChngBg(id,file)ですが、たとえば最低限 <script type="text/javascript"> <!-- function ChngBg(id, file) { file = "url('" + file + "')"; document.getElementbyId(id).style.background = file; } --> </script> みたいな雰囲気になるはずです。違ってたらjavascriptのカテゴリ で訊いてみてください。

noname#250302
質問者

お礼

あ、そうですよね。OnMouse何なのかわからないですよね。曖昧ですみません(><;) こちらの勉強不足でちょっと理解しきれませんでした。 (勉強してたら絶対わかる回答なんだと思います。すみません><;) 「他にこうしたらどうなるんだろう」という疑問も出てきたので、出直してきます。 回答、ありがとうございました!

関連するQ&A

  • 異なるセルに触れる度、テーブル背景画像もそれぞれ変化させる方法

    オンマウスで異なるセルなどの背景を変える方法 http://okwave.jp/qa4890043.html で質問した者です。 その質問で教えて頂いたやり方(※1)を応用して、 異なるセルに触れる度に、テーブル自体の背景もそれぞれ異なる画像に変化させる方法を教えて下さい。 マウスオーバーで変化、マウスアウトで元の背景に戻る、というかたちでお願いします。  * * *  テーブルにaaa.jpgという背景が設定されているとして、 <table><tr> <td>1111</td> ←このセルに触れるとテーブル背景がbbb.jpgに変化。 <td>2222</td> ←このセルに触れるとテーブル背景がccc.jpgに変化。 </tr></table> どのセルでもマウスアウトで元のaaa.jpgに戻る。 (※1) <script> function change(obj){ var p=obj.parentNode; while(p){ if(p.nodeName=="TABLE") break; p=p.parentNode; } p.style.backgroundImage="url(****.jpg)"; } </script> <table> <tbody> <tr> <td onMouseover="change(this)">1111</td> <td>2222</td> <td>3333</td> </tr> </tbody> </table> 私からのレスは明日以降になってしまいますが、宜しくお願いします。

    • ベストアンサー
    • HTML
  • セルの背景画像の変更

    リンクに触ると背景画像をp15.jpgに変更したいのですが よろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>

  • 画像にオンマウスで背景画像を固定

    画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか? 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。

    • ベストアンサー
    • HTML
  • テーブルの背景をマウスオーバーで変える

    お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか? FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか? phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします

    • ベストアンサー
    • HTML
  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか?わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか? 練習問題と自分が作ったソース載せます。 <html> <h4><b>1問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">~</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 <第一問:幅400、高さ400、上のセルの数が2つ、下のセルの数が2つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。> どうですか?うまく表示されましたか? レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">~</table> ・<tr bgcolor="★">~</tr> ・<td bgcolor="★">~</td> ★には色指定値(例:#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列(一行)に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 <第二問:幅50、高さ50、1つのセルのテーブル全体の背景を赤くしてみましょう。      赤→#ff0000> <第三問:幅150、高さ100、上のセルを3つ、下のセルを3つのテーブルを作り、      上3つのセルの背景を青くしてみましょう。      青→#0000ff> <第四問:幅100、高さ100、上のセルを2つ、下のセルを2つのテーブルを作り、      左上のセルの背景を緑にしてみましょう。      緑→自分で見つけて下さい>

  • Safariでテーブルのセルの高さを均等にしたい

    Safariです(ちなみに見ているバージョンは4) <table> <tr> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> </tr> </table> このような、片方が結合しているテーブルで、 隣のセルの高さを均等にしたいのです。 ほかのブラウザでは良いのですが、 Safariだとどうしても上が短く、下が長くなってしまいます… CSS等で均等にできないでしょうか?? 試しにheight:50%;にしましたがなりませんでした。

    • ベストアンサー
    • HTML
  • 背景が透けると文字も透ける

    初心者ですが、本やネットをみながらHPを作成しています。 そこで、背景画像の上に文字を入れると読みにくいので 画像を透けさせようとテーブルを作成したのですが 同時に文字も透けてしまい、読みにくさは変わりません。 どうすれば良いでしょうか? タグは以下の通りです。 <table align="center" style="background-color:#c0c0c0; filter:Alpha(opacity=50);" height="600" width="400"> <tr><td> <font size="-1" color="#000000">文字文字文字 </font> </td></tr> </table>

    • ベストアンサー
    • 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>

  • tableの中のtableの表示と外側(大きい方)のtableに背景画像を表示させる方法

    非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側(大きい方)のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか?下記ソースまでは作ったのですが、中(小さい方)のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか?もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white">  <TR>   <TD> 文章 </TD>  </TR> </TABLE> </CENTER> </body> </html>

  • 背景画像が反映されない

    以下スタイルシートとHTMLを記入しましたが背景画像が反映されません。 CSS .ta1 { background-image: url(../images/staff.jpg); } HTML <table class="ta1"><tr><td>aaaaaaaa</td></tr></table> 何がまちがっているんでしょうか? 画像の位置は間違っていません。

    • ベストアンサー
    • HTML

専門家に質問してみよう