• 締切済み

JavaScriptで画像の上に画像を載せたいのですが・・・・。

みなさんこんばんは。 いつもお世話になっております。 JavaScriptで数秒後に画像の上に画像を載せたいのですが・・・・。 まだはじめたばかりで、どうすれいいのかわかりません・・。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

一番簡単（？）な例を。 重なっていて非表示になっている画像を、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>

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

いめーじようそは、いんらいんがたなので、ぶろっくようその なかに。 いちは、すたいるしていで。 じかんは、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>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptを使った画像拡大

    こんにちは。いつもお世話になっています。 http://coliss.com/articles/web-services/581.htmlのSplashupのキャプチャ画像をクリックすると、 ブラウザはそのままで画像だけが大きくなり、ドラッグで動かせます。 これを自分のホームページにも取り入れたいと思っています。 おそらくJavaScriptを使っていると見当はつき、調べてみたのですが、どうすればいいかわかりません。 どなたかご教授お願いします。

  • ランダムに変わる画像の上に画像を載せる

    いつもお世話になっています。 添付のように画像が表示されるページを作りたいです。 ・画像A＝更新するとランダムに画像が変わる ・画像B＝固定 ・画像C＝固定 単にAとBだけならAをjavascriptで動かしたことがあるのですが、今回AとBの上にCが重なる形なのでどうすればいいのか悩んでいます。 Aは写真なので、単にCをAとBの境界線で分割するとうまくいきません。 お知恵をおかりできれば幸いです。 補足説明が必要でしたらご指示いただけますでしょうか。 よろしくお願いいたします。

  • javascriptでポインタを画像の上にのせると左の画像が変わるやり方

    http://www.dospara.co.jp/5goods_pc/pc_detail.php?h=g&f=g&m=g&mc=1169&a=1 ドスパラのHPみたいにポインタを画像の上にのせると左の画像が変わるjavascriptのサンプルがあったら教えていただけないでしょうか。 よろしくお願いします。

  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • javascriptを使って画像を切り替える

    javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒　 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　 　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。

  • JavaScriptでの画像切替について。

    以下のようなことをしたいのですが、方法が分からず困っています。 http://www.astellas.com/jp/ メニューの上にマウスがくると、下の画像が切り替わる。 http://www.mos.co.jp/index.html メニューの上にマウスがくると、プルダウンのメニューが表示される。 上の２つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。 JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。 上の２つを実現するのは、今は諦めたほうが良いでしょうか？ JavaScript以外でも実現可能だったら教えていただけないでしょうか？ (※FLASHは除く。例えばCSSなど) よろしくお願いします。

  • javascriptで画像を切り出して保存

    javascriptで画像を切り出して保存 javascriptで画像の一部分を切り出して、別ファイルとして 保存することは可能でしょうか？

  • JavaScriptを使って画像の拡大

    JavaScriptを使って画像の拡大をしようとしています。 Fancyzoomを使って画像の拡大はできるようになったのですが、 IE6だと、セレクトボックスが拡大した画像の上に表示されてしまいます。 調べていくとIE6のセレクトボックスにはZindexが利かないことが分かりました。インラインフレームとdivを使えばセレクトボックスを画像の下に隠すことが可能だとはわかったのですが、 Fancyzoomの何処を変更すればいいのかわかりません。 すみませんが、ご教授を頂けないでしょうか？ 途方にくれています。どうか、よろしくお願いします。

  • JAVAscriptで時間更新の制御

    いつもお世話になっております。 また教えていただきたく思いましたのでよろしくお願いいたします。 JAVAscriptで毎日時間指定で、画像を更新するようなものがあればお教えいただけますでしょうか？ パーッと検索したんですが、出てこなかったのでぜひよろしくお願いいたします。

  • 画像がみれません。javascript～？

    最近パソコン使うようになったものです。賃貸情報のアパートの室内画像を見ようと「画像をみたい」をクリックしてもみれません。「画像をみたい」という部分をクリックして移動しようとすると javascript:Popup_PhotoViewer("/users/不動産屋の名前/ 数字","jpg","1","1)とでてきます。 画像をみるようにするにはどうしたら良いのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する