人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: ピ
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML JavaScript TOP デザイン 教授
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ぱこち
●80ポイント
<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 はそのまま)


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

◎質問者からの返答

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

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


2 ● rouge_2008
●60ポイント

スタイルシートで「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>

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ