HTMLで画像を貼り付け

前へ 次へ
このQ&Aのポイント
  • 自分のHPにリンク先の背景を乗せ、後付けでその背景の上に動画像（heart1とbanner）２タイプを左右端上貼りたいです。
  • 背景タグに以下のタグを使用して、画像を乗せたいです。
  • よろしくお願い致します。
回答を見る
  • ベストアンサー

ＨＴＭＬで画像を貼り付け

不明な点がありましたら補足要求かけてください。よろしくお願い致します。 自分のＨＰにリンク先の背景を乗せ、後付けでその背景の上に動画像（heart1とbanner）２タイプを左右端上貼りたいのです。 以下が背景タグでこれに画像を乗せたいのです。 （プライベートな部分は★に変えてあります。） <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52"><a href="http://www.★.net/ring/index.htm" target="_top"> </a> <a href="http://www.★.net/ring/index.htm"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52"> <div align="center"><a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <font size="1"> <font color="#FFFFFF"> 　 ★★</font></font> </div> </td> </tr> <tr> どうぞよろしくお願い致します。

noname#51554
noname#51554

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

  • ベストアンサー
回答No.2

こんばんは。＃１です。再度失礼致します。 下ではお答えしたことがご希望にあっていたようで何よりです（＾＾） そうして補足に書かれているタグですが…。 私の環境（WinXP／IE6.0）では質問者様のお考えのとおり横並びに表示されますがどういった環境でご確認でしょうか？ また、タグはご質問のタグにそのまま続けてよろしいでしょうか。 と言いますのも、テーブルタグと言うものは、全体的な値設定によって表示がまったく変わってきます。もし現在の書き方で縦ならびになってしまう場合、ご質問のタグと補足のタグの間に何か他の記述があったらそのせいかもしれません。 今回のタグもあわせ、単純なミスを修正したものを記述しておきますので一度こちらをコピーして確認してみてください。 <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52><a href="http://www.★.net/ring/index.htm"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52" valign="top" align="right"> <a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <div align="center"><font size="1" color="#FFFFFF">★★</font></div> </td> </tr> <tr> <td colspan=2 align="center"> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;random target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>random</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;next target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>next</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;back target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>back</font></a><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif> </font><font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;list target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>list</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;addform target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>touroku</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.net/ring/index.htm target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>about</font></a> <font color=#FFCC99>-</font> </td> </tr> </table> 上のタグでは確実に横並びにするためにリング部分の改行をなくしてみました。また、センタリングの p と div が被っていましたので削除して、tdタグのalignを使用しています。テーブルの高さは td 部分でheight設定をしていたため、その設定も削除しています。

noname#51554
質問者

お礼

再度ご回答下さり、有難うございます！ お返事とても楽しみに待ってました（＾＾）。 ご指示頂いた様にやってみたらちゃんと作ることが出来ました！ とてもわかりやすく説明してくださって本当に感謝です。 またご縁がありました際にはどうぞよろしくお願い致します！

その他の回答 (1)

回答No.1

こんにちは。 ちょっと質問の意味がよく理解出来ないのですが、タグを見るには ・背景色 #241C43、幅390 のテーブルの中にリンクバナー（heart1.gif・ring_banner.gif）を左右端に表示させたい でよろしいのでしょうか？ とりあえず上の条件で表示させる場合の単純なタグのミスを修正したものを下に書きますので、やりたいことと違う場合は補足を入れていただければもう少しお手伝いできるかと思います。 <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52" valign="top"><a href="http://www.★.net/ring/index.htm" target="_top"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52" valign="top" align="right"> <a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <font size="1" color="#FFFFFF">★★</font> </td> </tr> </table> 上のタグですと、幅390のテーブルの中に、左上に幅66のheart1.gifを配置、右上に幅306のring_banner.gifを配置することになります。

noname#51554
質問者

補足

早々のご回答、有難うございます！ すみません、私は知識ゼロなのでうまく説明が出来ませんでしたが回答者様は見事当方の求めていた回答を下さり、とても助かりました。 ご回答を拝見しながら貼り付けはおかげさまで完了しましたが、また別の問題が出てしまったのでもし当方の下手な説明を理解して頂けましたら再度ご回答下さいませんか？ 以下、上記の続きなのですが </font></font> </div> </td> </tr> <tr> <td height=29 colspan=2> <div align=center> <p align=center> <fontcolor=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;random target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>random</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;next target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>next</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;back target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>back</font></a><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif> </font><font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;list target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>list</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.ne.jp/cgi-bin/webring?ring=intlring;id=1062;addform target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>touroku</font></a> <font color=#FFCC99>-</font> <a href=http://www.★.net/ring/index.htm target=_blank><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif>about</font></a><font color=#FFFFFF size=2 face=Arial Helvetica sans-serif> </font><font color=#FFCC99>-</font> </p> </div> </td> </tr> </table> これで画面を見ますと -random - next - back - list - touroku - about とセンターに縦表示になっているのですがこれを -random - next - back - list - touroku - about と横表示にし、同時に全体のテーブル（？）の高さの幅を狭めたいのですが・・・ わかりづらくて申し訳ありません。 もしよろしければご回答下さい。待ってます。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • Layerの中にあるリンクがmacで動作しません

    以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

    • ベストアンサー
    • HTML
  • インラインフレームについて

    限界です。どなたかお願いします！ Dreamweaver使用でHP作っています。 1.width=700 height=500のテーブル内に、CSSスタイルで薄いグラデーションイメージの背景。テーブル上下に全ページ共通のボタンあり、これをベース(テンプレート？）にしたい。 2.同じ場所に文章をはめ込みたいのでiframeがよいと考えた。 3.フレームはテーブル中央(上下ボタンの間）右よりで、ボーダラインなし、文章が短い場合はスクロールもなしにしたい。 4.インラインフレームを使っても背景は変わらず表示したい。 ということができません。特にフレームが左に寄ってしまいます。 参考までにHTMLコピーしてみました。どうぞ宜しくお願いします。 <table width="680" border="1" height="400"> <tr bordercolor="#CCCCCC"> <td valign="top" width="680" height="400"> <table border="0" height="10"> <tr> <td height="15"><font color="#808080"><a href="１.htm"><font size="-1">＞　１</font></a>　　　　<a href="２.htm"><font size="-1">＞　２</font></a>　　　　<a href="３.htm"><font size="-1">＞　３</font></a>　</font></td> 　 </tr> <tr> <IFRAME SRC="文書.htm" WIDTH="550" HEIGHT="300" align="right" FRAMEBORDER="0" NAME="文書" SCROLLING="no" ></IFRAME> </tr> </table>

    • ベストアンサー
    • HTML
  • 画像が表示されずに×印に

    サーバーにアップした画像が赤×になってしまいます。何がおかしいんでしょうか？幾つか質問を見てみましたが自分にどれが当てはまるか、よく判らないので タグを貼って置きますのでこれでわからないでしょうか？ ホームページビルダーを使っています。画像は素材屋さんでコピーして、ビルダーの標準モードに直接貼り付けたものです。名前等は変更していません。 <TR> <TD><IMG src="k_heart04e.gif" width="40" height="40" border="0"></TD> <TD><IMG src="k_himawari0111.gif" width="38" height="225" border="0"></TD> <TD><IMG src="k_kgnezu01a[1].gif" width="1024" height="120" border="0"></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD><A href="index.html">トップ</A></TD> 上のタグのk_kgnezu01a[1].gifの画像です。 サーバーはトクトクです。よろしくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。

    スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！

  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ 　　width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？

    • ベストアンサー
    • HTML
  • ブラウザによってリンク集のバナー画像が表示されません。

    ↓　こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名：<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人：***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、～。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名： <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人：***様<BR> ***さんが描かれるイラストは、～。</FONT></TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • HTMLソース

    下記のソースをhtmlで保存、開きます、正常ですが、 日本をクリックして戻るをクリックしますと、右スクロールとの間、下側にも隙間ができます。ホームページ作成中です。 <BODY bgcolor="#cccccc" topmargin="0" leftmargin="0" marginwidth="0" marginheiht="0"> <TABLE border="0" width="100%" height="100%" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD width="10%" bgcolor="#666666"></TD> <TD width="80%" bgcolor="#cccccc"> 　<A href="nihon.htm"><font color="3333ff">日本</font></a> <TD width="10%" bgcolor="#666666"></TD> </BODY> よろしくお願い致します。

  • HTMLでテーブルを縦に並べたい！

    基本的な質問でお恥ずかしいのですが、困っています。 テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。 どこが悪いのでしょうか？初心者ですみません…お知恵をお貸しください(T_T)。 <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left"> <tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th> <th width="150"> <font size="+4"><strong><big>C</big></strong></font></th> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td><td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td><td></td></tr></table> </p></div> <p></p> <table align="center" bgcolor="#80ffff" height="20" width="250" border="1" cellspacing="2" cellpadding="0"> <tr><td><blink>HOME</blink></td></tr> </table> </body>

    • ベストアンサー
    • HTML
  • このテーブルタグの中の色を白にするには

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます（画像<A href="images/001_base_1.gif">１</A>・<A href="images/001_base_2.gif">２</A>・<A href="images/001_base_3.gif">３</A>・<A href="images/001_base_4.gif">４</A>）</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色（背景の色）になっています。 これを透明でなく白にする方法をおしえてください！

  • マウスが重なったら画像の上に文字を表示する

    今までに、画像を背景としてHTMLでその上に文字を表示することは出来たのですがそれだと文字が表示しっぱなしで、JavaScriptを使って画像にマウスが乗ると文字を表示するタイプにすると文字が画像の下に表示されてしまい上手くいきません。 画像にマウスが乗ると文字を画像の上に表示するようにするにはどのようにしたら良いでしょうか？ ちなみに HTMLで考えたもの -------------------------------------------------------- <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><TABLE border="0" width="90" height="90" background="aikon/M1-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> <td><TABLE border="0" width="90" height="90" background="aikon/M2-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> </tr> -------------------------------------------------------- JavaScriptの場合 -------------------------------------------------------- <script language="javascript"> function pDsp(id){ var pItems=document.getElementsByTagName("P"); for(var i in pItems){ if(pItems[i].className=="groupABC" && pItems[i].id!=id) pItems[i].style.display='none' } var obj=document.getElementById(id); obj.style.display=(obj.style.display=='none')?'':'none'; } </script> <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><P onmouseover="pDsp('a')"><img src="aikon/M1-アイコン2.gif" width="90" height="90" border="0" /></P></td> <td><P onmouseover="pDsp('b')"><img src="aikon/M2-アイコン2.gif" width="90" height="90" border="0" /></P></td> </tr> <td><P id="a" class="groupABC" style="display:none"> <nobr> <A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> <td><P id="b" class="groupABC" style="display:none"> <nobr> <A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> </table>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する