- 締切済み
JavaScriptで画像の上に画像を載せたいのですが・・・・。
みなさんこんばんは。 いつもお世話になっております。 JavaScriptで数秒後に画像の上に画像を載せたいのですが・・・・。 まだはじめたばかりで、どうすれいいのかわかりません・・。
- KriAkino
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
一番簡単（？）な例を。 重なっていて非表示になっている画像を、javascriptでn秒後に表示させているだけという方法です。 <html> <head><title>test</title> <script type="text/javascript"> function test(n) { setTimeout(function() { document.getElementById('target').getElementsByTagName('IMG')[1].style.display = 'block'; }, n*1000); } </script> </head> <body> <div style="position:relative;" id="target"> <img src="A.jpg" alt="testA"> <img src="B.jpg" alt ="testB" style="position:absolute; top:0; left:0; display:none;"> </div> <p> 2秒後に表示<br> <input type="button" value="test" onclick="test(2);"> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
いめーじようそは、いんらいんがたなので、ぶろっくようその なかに。 いちは、すたいるしていで。 じかんは、setTimeoutで。 かんすうaddImageに、setTimeoutでつかうかんすうを つくらせ、さらにそれをとうろくして、じっこうするだけの じょうたいのものをかえさせる。 したは、へんすうgにそれをだいにゅう。 それをじかんをずらして、じっこう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <p> <img src="1.gif" width="600" height="600"> </p> <script type="text/javascript"> var addImage = function ( src, alt, title, wait, x, y ) { var p = document.createElement( 'div' ); var img = document.createElement( 'img' ); var s = img.style; img.alt = alt; img.title = title; s.position = 'absolute'; s.top = (y|0) + 'px'; s.left = (x|0) + 'px'; p.appendChild( img ); var view = function( ) { document.body.appendChild( p ); }; return function ( ) { setTimeout( view, wait ); }; }; var imgsrc = './img/0.gif'; for(i = 0; i<36 ; i++ ) { var px = 300 + Math.sin( i * 3.14159 / 18 ) * 250; var py = 300 - Math.cos( i * 3.14159 / 18 ) * 250; var g = addImage( imgsrc, '*', '', 2000 + i * 100, px, py ); g(); } </script>
