JavaScriptの事で質問です。

<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 はそのまま)

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

スタイルシートで「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="画像１"><br>
		<img src="images/image2.png" id="img2" alt="上に重ねる画像"><br>
		<input type="button" value="表示" onclick="imgView()">
	</div>