• ベストアンサー

画像を重ねて表示したい

画像を表示するタグで<img src="a.gif"><img src="b.gif">と書くと、横に並んで表示されます。ごく当たり前か。。 んで、このa.gifとb.gifを重ねて表示したいです。a.gifを手前、b.gifを奥というかんじです。 2つの画像は同じ大きさです。 何かいい方法ありませんか?アドバイスお願いします。 連続の質問で申し訳ありません。

  • HTML
  • 回答数3
  • ありがとう数6

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

  • ベストアンサー
  • kosa
  • ベストアンサー率25% (379/1464)
回答No.1

簡単な方法としては、下に設置する画像をテーブルの背景として使用します。 そのセルに上にくる画像を普通に配置すれば、一応は重ねた状態になります。

norelec
質問者

補足

なるほどっ!セルの背景とすれば重なりますよね。 気づきませんでした。 ということは、 <table border="0"><tr><td background="b.gif"> <img src="a.gif"></td></tr></table> とやれば・・・・・できましたっ! ありがとうございます。 こういうやりかとがあるものだと勉強になりました。 本当にありがとうございます。

その他の回答 (2)

  • ps5550
  • ベストアンサー率22% (2/9)
回答No.3

こんな感じで、スタイルシートで位置を固定する方法もあります。 <img src="./a.jpg" style="position:absolute; top:100px; left:100px;"> <img src="./b.jpg" style="position:absolute; top:100px; left:100px;">

  • beam
  • ベストアンサー率24% (412/1679)
回答No.2

同じ大きさの画像を2枚重ねて表示させると、奥側の画像は見えませんから、何か意味があるのでしょうか?  表側の画像だけ表示させれば、済みますね(^^; 2枚の画像をずらして、表示させれば、奥側、手前側と表現できますが、タグで表示を指定してやればいいわけですが、絵柄によってはそう見えないことがありますので、そーなると予め画像を合成しておいて2枚に遠近感を付けた画像を用意する必要があります。

関連するQ&A

  • 画像タグについて

    画像タグについて テキストエディタにHTML(タグ)を入力してホームページの作成を目指して勉強しています。 ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、 使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。 となっています。 正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" > 不正解↓ <img src="A" > <img src="B" > <img src="C" > <img src="D" > 理由としてはブラウザできれいに表示されるからだそうです。 実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。 疑問なのですが、同じタグを縦で入力するか横に入力するかで なぜ、ブラウザの表示に違いで出るのでしょうか? また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか? それはどうやって見分けるのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • ロールオーバー画像の枠線を消したい

    初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!

  • 画像の間隔を詰めたい

    以下の画像の間隔を詰めたいのですがb-95.gifとその左右にあるb-305.gifとの間隔が埋まりません。 この画像はアイコンで、提供してくれるサイトにある見本ではちゃんと 感覚が埋まっているのですが、どうすればいいのでしょうか? <img src="hiyo_43.gif"> <img src="b-325.gif"><img src="b-305.gif"> <a href="index.html"> <img src="b-95.gif" border="0" onmouseover="this .src='b-105.gif'"> </a> <img src="b-305.gif"><img src="b-102.gif">

    • ベストアンサー
    • HTML
  • 画像 表示について質問です。

    画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。

    • ベストアンサー
    • PHP
  • テキストエリアに画像URLを貼り付ける入力支援

    簡単なCGI日記を作成してますが、この入力フォームのテキストエリアに手動で画像URLのタグを入れるのが手間なので、 ↓ サーバーにある画像一覧が別窓(違うファイルから)で表示されていて(実際には画像表示ですが・・・) <a href="sample1.gif"><img src="sample1.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> ↓ 画像をクリックするとCGIのテキストエリア内に自動で <a href="sample1.gif"><img src="sample1.gif"></a>とタグを挿入するjavascriptってサンプルになるようなものはないでしょうか?

  • jpg画像が表示されません…。

    HPを作成しているのですが、作ったページに画像が表示されません。 gifの画像は表示されるのにjpgの画像が表示されないのです。 タグは<img src="xxxx.jpg">としているのですが、赤いバツ印になってしまいます。 なぜでしょうか。回答よろしくお願いします。

  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • perlで画像表示

    htmlファイルから<img src="./aa.cgi">と書いて連続した画像を表示させたいのですが @aa =(1,2,3); foreach(@aa){ open(IMG, "./$_.gif"); binmode(IMG); binmode(STDOUT); print "Content-type: image/gif\n\n"; read(IMG, $img, 1024); print $img; close(IMG); } こう書いたらだめなのでしょうか?

    • ベストアンサー
    • Perl
  • 2箇所の画像をランダムに複数表示

    はじめましてjavascript初心者のものです。 2箇所に配置されてる各画像をランダムに表示したく、以下宣言をしてますがどうしても2箇所目が表示されません。お手数ですが、教えてください! 2箇所目をrandWrite_sとして名前を変更してます。 ▼▼▼▼▼▼▼▼▼▼▼▼meta内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <script type="text/javascript"> <!-- // ランダムに画像を表示する1箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01.gif"></a>', '<a href="#"><img src="/images/ad_banner02.gif"></a>', '<a href="#"><img src="/images/ad_banner03.gif"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> <script type="text/javascript"> <!-- // ランダムに画像を表示する2箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01_s.gif"></a>', '<a href="#"><img src="/images/ad_banner02_s.gif"></a>', '<a href="#"><img src="/images/ad_banner03_s.gif"></a>' ]; function randWrite_s() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> ▲▲▲▲▲▲▲▲▲▲▲▲meta内タグ▲▲▲▲▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼▼▼▼▼body内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <p><script type="text/javascript">randWrite();</script></p> <p><script type="text/javascript">randWrite_s();</script></p> ▲▲▲▲▲▲▲▲▲▲▲▲body内タグ▲▲▲▲▲▲▲▲▲▲▲▲

    • ベストアンサー
    • Java

専門家に質問してみよう