• ベストアンサー

テーブルに設定された画像を差し替える方法を教えてください。

現在、dreamweaverを勉強中です。 そこで以前、これ編集してみれば?といわれたものを掘り出し、編集しているのですがわからないことがあります。 <table width="250" border="0" cellspacing="0" cellpadding="0" background="./img/index-img14.gif"> こういったものの場合「"./img/~」が画像の部分だと思うのですが、どうすれば画像を簡単に差し替えできるのでしょうか? 手打ちですればなんとかなるとは思いますが、デザイン画面上で差し替えることはできないのでしょうか? どうかよろしくお願いいたします。

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

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

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

こんにちは >デザイン画面上で差し替える Web上で利用者に変更してもらうということですか? sample0.gifなどを差し替える画像のパスに変更 <script language="javascript"><!-- function tablebg(churl){ document.getElementById("t1").style.backgroundImage = "url('"+churl+"')"; } //--></script> <table id="t1" style="width:300px;height:300px;background-image:url('sample0.gif');"> <tr> <td>&nbsp;</td> </tr> </table> <a href="javascript:void(0);" onClick="tablebg('sample0.gif')">デフォルト背景</a> <a href="javascript:void(0);" onClick="tablebg('sample1.gif')">テーブル背景1</a> <a href="javascript:void(0);" onClick="tablebg('sample2.gif')">テーブル背景2</a> そうではなくてこの1行を変更して背景を変えるということですか? ・『./img/index-img14.gif』の部分を差し替える画像のパスに変更する ・差し替える画像を『img』というフォルダ内で『index-img14.gif』という名前で上書き保存する のどちらかでいいと思いますが

その他の回答 (1)

noname#118694
noname#118694
回答No.1

background="・・・" の部分はテーブルの背景画像などを設定する箇所です。 ですので、ここを書き換えてやれば画像を差し替えることができます。 imgというフォルダ内に差し替える画像を放り込んで、index-img14.gifを差し替える画像のファイル名に変更してやればOKですよ。

関連するQ&A

  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • 画像枠テーブルについて

    画像を使ってテーブルを作ってます。 しかし、上と右の画像が繰り返してしまいます。 ここで調べてCSSでやってみましたが余計崩れてしまいました。 右下の部分と右の部分の結合もおかしくなります。 どうしたらいいんでしょうか? http://blog-imgs-19.fc2.com/x/a/n/xandinosqu/table_temple.png 紫で囲まれた部分です。 ソースは <TABLE border="0" cellpadding="0" cellspacing="0" width="60%"> <TBODY> <TR> <TD><IMG src="左上の画像" width="15" height="15"></TD> <TD background="上の画像" width="100%"> </TD> <TD><IMG src="右上の画像" width="15" height="15"></TD> </TR> <TR> <TD height="50" background="左の画像"> </TD> <TD bgcolor="#ff577f"> <TABLE border="0" cellpadding="20" cellspacing="2" width="100%" height="100%" align="CENTER"> <TBODY> <TR> <TD>*中身*</TD> </TR> </TBODY> </TABLE> </TD> <TD background="右の画像"> </TD> </TR> <TR> <TD><IMG src="左下の画像" width="15" height="15"></TD> <TD background="下の画像"> </TD> <TD><IMG src="右下の画像" width="15" height="15"></TD> </TR> </TBODY> </TABLE> です。 ビルダーで編集してます。 横幅は60%でいいんです。 画像サイズは、左上・右上・右下・左下・右・左・上・下全て15×15です。 中途半端な説明かと思いますがご教授お願いします。 えーっと、それとなるべくなら小学生でも分かりやすい説明をお願いします。小学生じゃないですけど。

    • ベストアンサー
    • HTML
  • table内画像について

    携帯サイトを作成しているのですが、下記の内容を記述したところ、上下の画像が2px程表示されませんでした。 test1.gifは画像下部分、test2.gifは画像上部分が表示されませんでした。 このような状態はどのような原因があるからでしょうか? <table width="240" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="test1.gif"></td> </tr> <tr> <td bgcolor="#ffffcc"> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト </td> </tr> <tr> <td><img src="test2.gif"></td> </tr> </td> </tr> </table>

  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか? 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • tableタグとtableタグの間の余白の消し方について

    現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table>      ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • オブジェクトを指定してください、のエラーについて

    HTML作業中、下記のようなエラーメッセージが表示されます。 エラー:オブジェクトを指定してください。 文字:3 コード:0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか?それと、 ライン:200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか? メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック!" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif">&nbsp;</td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>

  • 画像をいくつか一列に並べ最後の画像のみ100%で指定する方法

    HTMLで画像を横に一列に並べ最後の画像だけブラウザの端の最後まで表示されるようにwidth=100%と指定しましたがうまくいきません。 ソース <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div> <img src="hoge.gif"><img src="hoge2.gif"><img src="SAIGO.gif" width="100%"> </div> </td></tr> </table> はじめの2つは一列に並んでくれるのですが最後の画像のみ並んでいる画像の下(別の行に)ブラウザいっぱいに表示されます。 <div>を入れてみましたがだめでした。 希望としてはすべの画像を一列に並ばせるが最後の画像だけブラウザの右側までいっぱいに表示されるようにしたいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • カウンタとその左右につける画像の隙間をなくしたいのですが

    カウンタの左右に画像をつけて かわいらしいカウンタにしたいのですが どうしてもカウンタの数字の左右の画像との間に 隙間ができてしまいます。 今は下記のようにテーブルタグでつなげているのですが 完全に隙間をなくすことができません。 どうしたら完全に隙間をなくせますか? <TABLE Border="0" CellSpacing="0"CellPadding="1"> <TR> <TD>  <IMG Src="material/counter_r.gif" Border="0" Width="22" Height="25"></TD><TD><img src="cgi-bin/・・・/count.cgi?gif" Border="0"> </TD> <TD>  <IMG Src="material/counter_l.gif" Border="0" Width="22" Height="25"> </TD> </TR> </TABLE> お忙しいところ申し訳ありませんが 教えていただけるとうれしいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで左に画像、右にテキストを並べたい。

    CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 (●=画像 ▲=テキスト) 現在の表示は ●▲ となっているのですが、これを ●     ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか? 色々試したのですが、どうしても下のように改行してしまいます。 ●       ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。

    • ベストアンサー
    • HTML