• ベストアンサー

画像をガラス面にして、それをテーブルにして・・・

カテがジャバスクリプトとHTMLが被っているて、 カテがわからなかったんですが、HTMLがベースなので、このカテで 質問しますが。 画像をガラス面にするglossyについてですが。 このglossyをテーブルの背景に設定したいと思っていますが、上手く いきません。 下記にソースを書きました。 略 <script src="glossy.js" type="text/javascript"></script> <table width="650" border="0" background="*******.jpg" class="glossy"> <tr> <td>ここに、フリーのサイト内検索を挿入</td> </tr> </table> このような感じにしています。 http://www.yahoogle.jp/このサイトの検索エンジンの所の背景を つけて、そこの背景をガラス面にしたいと思っています。

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

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは 早速使われてるみたいですが残念ながらGlossy.jsはimg専用です もし使うんであればこんな感じ? <style type="text/css"><!-- #upcontents,#downcontents { width:200px; height:100px; position:absolute; left:50px; top:50px; } #upcontents { padding:10px; } --></style> <script type="text/javascript" src="glossy.js"></script> <img src="画像パス" class="glossy" id="downcontents"> <div id="upcontents">本文</div> cssの『z-index』を使用しない時は順番は『画像』→『本文』の順番でないとダメです z-indexを使えば順不同です(数が多い方が上に来る) #upcontents { z-index:2; } #downcontents { z-index:1; }

noname#57880
質問者

お礼

返事おくれました。 このまえ、WEB2.0風のプログラムのURLを教えてくれた人でしたっけ? あのURLすごい役に立ってます。ありがとうございました。 今回はサンプルまで作ってくれて、ホントにお世話になっています。

その他の回答 (1)

  • venzou
  • ベストアンサー率71% (311/435)
回答No.1

imgタグ専用みたいですね。 背景画像には対応していないと思います。 1:いったんimgタグで表示する 2:それをキャプチャソフトで保存する 3:それを背景に使う これが簡単かも。

noname#57880
質問者

お礼

imgタグ専用なんですね。 1.2.3のやり方でも試してみます。 早い回答ありがとうございました。 他にアイディアがないかまだ、回答受け付けます。

関連するQ&A

  • マウスカーソルを乗せた時にテーブルの行の色を変える

    マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • ScriptがTABLEタグの中に表示されません。

    下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ?」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか? ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや?<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ?"); document.close();

  • operaだとテーブルがなくなります

    operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css    body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933;  width:100%; height:10%    }   .midori{background-color:#999933; width:100%; height:3.3%  }        htmlのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか

    • ベストアンサー
    • HTML
  • jqueryでテーブル行のマウスアウト時の動作

    jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>

  • table のバックグラウンドカラー

    background-color は継承されないものだと認識しております。 ・HTML内容 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>検証</title> </head> <table border="1" background="red"> <tr> <th>授業内容</th> <th>講義</th> </tr> <tr> <td>1時間目</td> <td>国語</td> </tr> <tr> <td>2時間目</td> <td>数学</td> </tr> <tr> <td>3時間目</td> <td>英語</td> </tr> <tr> <td>4時間目</td> <td>科学</td> </tr> </table> </body> </html> ====ここまで==== ボタンを押す。⇒setStyleが動く⇒tableの背景が赤色で塗られる。動作までは分かるのですが、 td、thの部分の背景まで赤色になっています。 これは、テーブルと言う枠に、赤色が塗られ、その上にtd、thが置かれる。 結果、td、thの背景赤色は (1)「td、thのbackgroundは指定していないため、デフォルトのtransparentが有効で、 テーブルの背景赤色が透けて見えている」 (2)「td、thに、tableのbackgroundが継承されて、赤く塗りつぶされていないということ」 の考えに間違いがないか確認させて頂きたいのです。 ご教授お願いします。

    • ベストアンサー
    • CSS
  • 背景画像が反映されない

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

    • ベストアンサー
    • HTML
  • テーブルをテーブルで囲う意味はありますか?

    <table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか? htmlの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に100個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな? と思い始めてきました。 意味はあるのでしょうか?

    • ベストアンサー
    • HTML
  • Firefoxでテーブルの背景画像が表示されない

    下記のようにテーブルに背景画像を表示させたいのですが、 なぜかFirefoxだけ背景画像が表示されません。(WindowsXP,Firefoxは最新版(1.5.0.7)です) IE,OPERA(ともに最新版)では表示されます。 いろいろと検索したのですが同様の相談は見つからず、自分が根本的にミスをしているのだと思いますが、どうしていいのかわからずに相談した次第です。 .tab{width:502px;margin-bottom:20px;} .01{background:url(img/title.gif) top no-repeat;width:502px;height:32px;padding:0px 0px 4px 20px;} .02{background:url(img/com_top.gif); width:502px;height:10px;} .03{background:url(img/com_middle.gif); width:502px;padding:5px 20px 5px 20px;} .04{background:url(img/com_bottom.gif); width:502px;height:10px;} <table cellpadding="0" cellspacing="0" class="tab"> <tr><td class="01">タイトル</td></tr> <tr><td class="02"></td></tr><tr><td class="03"> サンプルテキストサンプルテキストサンプルテキスト </td></tr><tr><td class="04"></td></tr></table> http://www.isonly.net/~second_blue/n/ ↑実際のページです。 汚いHTMLで申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。

  • スクロールするテーブルに背景画像を固定させたいのです

    HTMLでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </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

専門家に質問してみよう