JavaScriptのロールオーバーイメージについて

2023/10/15 03:22

このQ&Aのポイント

JavaScriptを使用したロールオーバーイメージについて解説します。
ロールオーバーイメージを実現するためには、事前に画像を読み込む必要があります。
forループを使用して、配列内の画像を順番に読み込む処理が行われます。

ベストアンサー

JavaScriptのロールオーバーイメージについて

2007/12/10 14:40

http://javascript.eweb-design.com/0811_mci.html これの img = new Array("img/img0.jpg","img/img1.jpg","img/img2.jpg","img/img3.jpg"); bfImg = new Array(); for(i=0; i<img.length; i++) { bfImg[i] = new Image(); bfImg[i].src = img[i]; } この部分がなぜ必要なのか分かりません。何をやっているかはだいたい分かるのですが、なぜfor(i=0; i<img.length; i++) のような処理をしなければならないのでしょう？

shima1231
お礼率31% (10/32)

その他([技術者向] コンピューター)
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

SAYKA
ベストアンサー率34% (944/2776)

2007/12/10 15:02 回答No.1

1行目ファイル名定義 2行目ロールオーバーするための器を用意 3行目ループ(1行目で定義した個数回) 4行目画像用の器として初期化 5行目画像のsrcを確定 6行目ループ終端

質問者

お礼 2007/12/10 18:03

ありがとうございます！だいたい分かりました!!

関連するQ&A

スワップイメージのフェード方法を教えてください
はじめまして。スワップイメージを、あるサイトを参考に作ってみました。それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。お助けください。お願いします。ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> 　<script language="JavaScript"> 　 　</script> </HEAD> <BODY> 　<TABLE> 　　<TR> 　　　<TD><IMG src="img/image1.jpg" name="image"></TD> 　　</TR> 　　<TR> 　　　 <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> 　　　<TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> 　　</TR> 　</TABLE> </BODY>
- ベストアンサー
- JavaScript
javascriptでの画像の先読みについて（その２）
その１からの続きです。。以下が私の作ったソースです。 <script language="JavaScript">  </script> ＃関係ないですけど、off_image()はいらないかも…。以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。よろしくお願いいたします。関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- ベストアンサー
- JavaScript
javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
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
JavaScriptのスライドショー　IE以外のブラウザで再生できない
JavaScriptのサンプルソースを提供されている方のサイトからコピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか？ <script>  </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script>  </script>
- ベストアンサー
- JavaScript
JavaScriptでスライドショーを2箇所
お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、色々試してみても上手くいきません。ご教授をお願いいたします。
- ベストアンサー
- JavaScript
javascript 画像切り替え　ランダム　順番
インラインフレーム内のランダムな画像切り替えはできたのですが、順番に切り替えていくというのが出来ません。。。ランダムソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=Math.floor((Math.random()*100))%imglist.length; var output="<IMG src=images/randomimg/"+imglist[selectnum]+">" ; document.write(output); 順番ソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=imglist.length-1; var i=0; function forward() { i=selectnum--; var output="<IMG src=images/randomimg/"+imglist[i]+">" ; document.write(output); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。どなたか解決方法よろしくお願いします。
- ベストアンサー
- JavaScript
リモートロールオーバーで画像と一緒にテキストも切り替える方法
初投稿です。当方ジャバスクリプト初心者です。 Dreamweaverで画像(メイン画像が1枚、サムネイル画像が30枚ほどあります)のリモートロールオーバーをやったのですが、同時にテキスト(説明文5行ほど)も一緒に表示・切り替えする方法が知りたいです。ジャバスクリプトで出来るのですか？全く検討もつかないので、どうか宜しくお願いします。 ■以下現状のhtmlです。尚、練習用なのでスタイルシートは真っ白です。■ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/JavaScript">  </script> </head> <body onload="MM_preloadImages('img/l_mitudera.jpg','img/l_aigou.jpg','img/l_jyuzo.jpg','img/l_kyobashi.jpg','img/l_noda.jpg')"> <img src="img/l_mitudera.jpg" width="300" height="260" name="main"><br /><br /> <img src="img/s_mitudera.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_mitudera.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_aigou.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_aigou.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_jyuzo.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_jyuzo.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_kyobashi.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_kyobashi.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_noda.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_noda.jpg',1)" onmouseout="MM_swapImgRestore()" /> </body> </html>
- 締切済み
- JavaScript
javascriptのスライドショーで、ポイント時に代替テキストを表示するか、ポイントしなくてもキャプションを表示するためには？
初心者ですが何とかjavascriptで自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか？スタイルシートは使っていません。現在はこんな感じです。根本的に違うのでしょうか？できれば簡単な方法があればと思います。 head部には <SCRIPT>  </SCRIPT> 対象部分には <SCRIPT>  </SCRIPT>
- 締切済み
- その他(ソフトウェア)
JavaScriptに関する簡単な質問です。
<script> var image1=new Image(); image1.src = "image/ny.jpg"; var image2=new Image(); image2.src = "image/tokyo.jpg"; var i = 1; function change(){ if(i==1){ element.src=image2.src; i=2; }else{ element.src=image1.src; i=1; } } </script> <img id="photo" src="image/ny.jpg" /> <script> var element = document.getElementByid("photo"); element.onclick=change; </scropt> オンクリックで画像が切り替わるというスクリプトなのですが、 new Image() というのは new date() と言うのと関係しているのでしょうか。 var i=1 と言うあたりからよくわからなくなってしまいます。最後のelement.onclick=change;と言うのもよくわかりません。スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。よろしくお願いします。
- 締切済み
- JavaScript