JavaScriptの事で質問です。

html側で下記のように書いておき、
<img src="./images/img1" id="img1" style="position:absolute">
JavaScriptで下記のように書けば"移動"する事は出来ました。
document.getElementById("img1").style.top = ○○;
■ここで質問なのですが、
■"移動"ではなく、"出現"させる事は可能でしょうか?
■<img src="">と、空の初期値にすれば"出現"は可能ですが、
■□←こんな感じの"画像が表示される場所ですよ"的なものが表示され、デザインが崩れてしまいます。
■画像の上に、「パッ」ともう一枚の小さい画像を表示させたいのです。
どなたか分かる方ご教授くださいませ。

回答の条件
  • 1人2回まで
  • 登録:2010/09/29 02:00:07
  • 終了:2010/09/29 10:45:51

回答(2件)

id:pacochi No.1

ぱこち回答回数246ベストアンサー獲得回数1112010/09/29 02:54:23

ポイント80pt
<img src="./images/img1" id="img1" style="position:absolute;display:none;">
with ( document.getElementById("img1").style ) {

	top = "○○px";
	display = "block";

}

もしくは、

<img src="./images/img1" id="img1" style="position:absolute;top:-1000px;">

(JavaScript はそのまま)


のように書けば、出現するような動きになります。

id:pikab1

おお、なるほど!display:noneですか。

ありがとうございます。感謝感謝です。

2010/09/29 09:24:37
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512010/09/29 02:56:48

ポイント60pt

スタイルシートで「visibility:hidden;」を指定しておいて、javascriptで「visibility:visible;」に書き替えて表示するのはいかがでしょうか?

http://www.htmq.com/style/visibility.shtml

※説明にもありますが、表示箇所はそのまま余白になります。

この場合は、「display: none;」を指定しておいて、「display: inline;」等に切り替えます。

画像の上に別の画像を重ねて表示するのでしたら、どちらを使用しても良さそうですね。

表示の(重ねる)順番は「z-index」で指定します。

http://www.htmq.com/style/z-index.shtml


例)

・スタイルシートとJavascript

<style type="text/css">
<!--
#imgBox {
	position:relative;
}
#img1 {
	position: relative;
	top: 0px;
	z-index: 1;
}
#img2 {
	position: relative;
	top: -25px;
	z-index: 1;
	visibility:hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function imgView() {
	elm = document.getElementById("img2");
	elm.style.visibility = "visible";
}
//-->
</script>

※表示位置は、「top」「left」等で適宜調整してください。

・HTML

	<div id="imgBox">
		<img src="images/image1.png" id="img1" alt="画像1"><br>
		<img src="images/image2.png" id="img2" alt="上に重ねる画像"><br>
		<input type="button" value="表示" onclick="imgView()">
	</div>

id:pikab1

なるほど、スタイルシートで、visibility:hidden;ですか。

正直スタイルシートは好きじゃないですが、参考にさせて頂きます。

2010/09/29 09:26:46
  • id:rouge_2008
    記述する場所は違いますが、どちらもスタイルシートを使用しているのですが・・・
    ※「style="~"」で要素内に直接指定した場合も、スタイルシートを使用しています。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません