ベストアンサー

ホームページ画像の重ね

2012/08/07 10:13

ホームページビルダーV１４を使っています、最初に画像「A.jpg」を配置し、アニメ画像「B.gif」を「A.jpg」の上に重ねてアニメ画像を表示したいのですが重ねる事が出来ません、方法は無いのでしょうか？。ご教授宜しくお願いします。

yoshiki3
お礼率30% (27/88)

ホームページ作成ソフト
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/08 11:03 回答No.3

たとえば下記のように (注)タブは＿に置換してあるので戻すこと。また画像はimage/ホルダーに入れてあります。 [HTML] HTML4.01 strict ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) で検証済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p class="ani1"> ＿＿＿<img src="./images/B.gif" width="88" height="31" alt="アニメ"> ＿＿</p> ＿＿<p class="ani2"> ＿＿＿<img src="./images/B.gif" width="88" height="31" alt="アニメ"> ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [CSS] CSS2.1 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み @charset "Shift_JIS"; p.ani1{ width:480px;height:360px; margin:0 auto; background-image:url(./images/A.jpg); position:relative; } p.ani1 img{ position:absolute; top:164px; left:196px; } p.ani2 img{ ＿display:block; ＿width:88px; ＿height:31px; ＿margin:0 auto; ＿padding:164px 196px; ＿background-image:url(./images/A.jpg); }

質問者

お礼 2012/08/08 21:04

ORUKA1951さん再度の回答有難う御座います。今度はうまく行きました、バックグランドの画像の上でアニメーション.gifが正常に動作しています、本当にありがとう！今後も宜しくお願いします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/07 16:36 回答No.2

<p class="animation"><img src="[animation.gif]" width="240" height="180" alt="アニメ"></p> だとしたらスタイルシートで p.animation{ background-image:url([背景画像]); position:relative; width:480px; height:360px; } p.img{ position:absolute; left:120px; top:90px; } とするだけ。

質問者

補足 2012/08/07 20:47

ORUKA1951さん回答有難う御座います。うまく重なりません、以下「newpage.html」と「style.css」の内容です。（自分はhtmlファイルの「alt="アニメ"」部分が理解出来ていないです）、ご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.7.0 for Windows"> <link rel="stylesheet" type="text/css" href="style.css"> <title></title> </head> <body> <p><img src="A.jpg" width="384" height="512" border="0"><img src="B.gif" width="88" height="31" alt="アニメ"></body> </html> -------------以下 style.css ファイル-------- p.animation{ background-image:A.jpg; position:relative; width:480px; height:360px; } p.img{ position:absolute; left:120px; top:90px; }

ログインすると、全ての回答が全文表示されます。