JavaScriptファイル名の書き方

このQ&Aのポイント
  • HPのトップページにスライドショーをJavaScriptで置こうとしています。
  • 参考サイトのプログラムでは画像ファイルを同じフォルダに置くように指定されていますが、ファイル・フォルダが混雑してきたため、画像ファイルを別のフォルダにまとめましたがうまくいきません。どのように書き直せば良いでしょうか?
  • ファイル名はどのように指定すれば良いですか?
回答を見る
  • ベストアンサー

JavaScript ファイル名の書き方

HPのトップページにスライドショーをJavaScriptで置こうとしています。 参考サイトは http://www.geocities.jp/miyake_kobo/cp_ex/cp_ex_006.html です。 p_obj=new Array();for(t=f_no;t<ii+1;t++){p_obj[t]=new Image();p_obj[t].src=t+".jpg";} の部分で画像ファイルを読み込んでいるのですが(p_obj[t].src=t+".jpg";) この参考プログラムの作者も書いていますが、全て同じフォルダーに置くことと。 でもファイル・フォルダが混雑してきたので、スライドショーする画像ファイルを「gazou」フォルダにまとめ置き、p_obj[t].src="gazou/"+t+".jpg" にしましたが、うまくいきませんでした。 どんな書き方をしたらよいのでしょうか?

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

  • ベストアンサー
回答No.1

試してみましたがjpgファイルを参照する3ヶ所を全て書き換えたところ正常に動作しました。 9行目 p_obj[t].src=t+".jpg"; 13行目 document.getElementById("timg").src=ii+".jpg" 42行目 src="0.jpg" です。

situmonnsya
質問者

お礼

ありがとうございます。 しばらく、家をあけていたので、お礼が遅くなりました。 申し訳ありません。 ご指摘のように、13行目、42行目も書き換えるのを忘れていました。 解決、ありがとうございます。

関連するQ&A

  • 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か所目の指定がどこか足りない又は違うのではないかと思うのですが、 色々試してみても上手くいきません。 ご教授をお願いいたします。

  • 記載しているファイル名より、画像を抽出したい

    エクセルシートに記載している画像ファイルを、別のフォルダから抽出 する方法を教えてください 今、エクセルシートの A列の1行から1000行に画像のファイル名が記載されています これをtest.xlsxとします ここにはa列に下記のように記載されています ------------------------------------------- a1セルに0000a1.jpg a2セルに0000a2.jpg a3セルにxyz.jpg a4セルにopq.jpg ・ ・ ・ a1000セルにopqrst.jpg ---------------------------------------------- このようなものです そして、別の(例えばgazo)フォルダに、a1~a1000の画像を含んだ、 それ以外の画像も入っているgazouフォルダがあります これを別のフォルダー(gazou_newフォルダー)に 先のエクセルファイルa1~a1000に記載されている 画像を取り込みたいのですが・・・・ どのようにしたらよいでしょうか

  • 説明文を表示するには?

    最近似たような質問ばかりしていますが、どうぞお助けください。 下のスクリプトに、画像を押すと画像の説明文が出てくるというスクリプトを入れたいんですがまったくわかりません。 スクリプトに詳しい方どうぞよろしくお願いします、教えて下さい。ちなみに初心者です。 <script language="JavaScript"> <!-- photo = new Array(); var pn = 0; photo[0]="WORKS/HOUSE/A house/A-house1.jpg"; photo[1]="WORKS/HOUSE/A house/A-house2.jpg"; photo[2]="WORKS/HOUSE/A house/A-house3.jpg"; photo[3]="WORKS/HOUSE/A house/A-house4.jpg"; photo[4]="WORKS/HOUSE/A house/A-house5.jpg"; photo[5]="WORKS/HOUSE/A house/A-house6.jpg"; photo[6]="WORKS/HOUSE/A house/A-house7.jpg"; var n=photo.length; p_obj=new Array();for(t=0;t<n;t++){p_obj[t]=new Image();p_obj[t].src=photo[t];} for(j=0;j<n;j++){document.write('<img alt="photo" width="100" height="80" hspace="5" vspace="5" src='+p_obj[j].src+' onclick="i='+j+';p_hyouji();">');} var hata=false,tid,tid2,i=0,min=30,zi,z_tid; function mae(){if(i>0){i--;p_hyouji();}else{i=n-1;p_hyouji();}} function tugi(){if(i<n-1){i++;p_hyouji();}else{i=0;p_hyouji();}} function p_hyouji(){document.getElementById("myimg").src=p_obj[i].src;} function saisyo(){i=0;document.getElementById("myimg").src=p_obj[i].src;} //--> </script>

  • JQueryによるclass名での背景切り替え

    下記ソースでおかしな挙動がでているので質問させて頂きます。 jQuery導入済みで2つのブロックの背景に同じクラス名を指定した上で背景を一定時間ごとに切り替えているのですが、指定していたクラスタをid名からclass名に変えただけで切り替えがおかしくなりました。 id名のとき 00→01→00→01→00→01→…… class名のとき 00→01→00→00→01→01→01→01→…… クラス名にしたことが原因でしょうか? function testBack(obj){ var t = '.changeBg'; if (obj>3){obj=0;} $(t).fadeIn(1000).css('background','url('bg_0'+ obj +'.jpg) center top no-repeat'); obj++; $(t).delay(8000).fadeOut(1000,function(){ setTimeout('testBack('+obj+')', 100); }); } $(document).ready(function(){ if ($('body').attr('class') != 'testBox'){ testBack(0); var img=new Array(); img[0]=new Image(); img[0].src= rootPath+'commons/images/bg_00.jpg'; img[1]=new Image(); img[1].src= rootPath+'commons/images/bg_01.jpg'; } });

  • ランダム画像&マウスオーバーで画像切り替え

    こんばんは。 下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> どなたかご教授頂けると助かります。 よろしくおねがいいたします。

  • ホームページビルダーでフォトギャラリー

    ホームページビルダー15でフォトギャラリーを作りたいのですが、一枚ずつページ移動するのではなく、同じページ内で手動のスライドショーのように(キャプションも一緒に)作る方法はありますか? よろしくお願いします このような感じです↓ http://www.geocities.jp/miyake_kobo/dl/temp2/temp2_3513.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の接続子について

    始めまして、JAVASCRIPPTで以下の様なコードを書いているのですが 'img' + page;の部分でエラーになってしまいます。どなたか正しい書き方を御享受下さい。 //画像を最初にキャッシュする var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var page = 0; img0 = "image/ginotitle.JPG"; img1 = "image/Gino1page.JPG"; img2 = "image/Gino2page.JPG"; img3 = "image/Gino3page.JPG"; function moverts(){ switch(window.event.button) { case 1://************** 左クリック ********************************************* page = page - 1 ; //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; case 2://************** 右クリック ********************************************* page = page + 1 ; alert( = sns ); //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; } }

  • javascript 時計24時間表示

    こんばんは。 現在、ホームページにデジタルの時計を配置しているのですが 表示について質問させていただきます。 今配置しているのは下記のソースで <script type="text/javascript"> <!-- document.write('<img src="am.jpg" name="p0"><IMG src="0.jpg" name="p1"><IMG src="0.jpg" name="p2">'); document.write('<img src="ten.jpg" name="p7"><IMG src="0.jpg"name="p3"><IMG src="0.jpg" name="p4">'); /* document.write('<img src="ten.jpg" name="p8"><IMG src="0.jpg" name="p5"><IMG src="0.jpg" name="p6">'); */ function jikoku3(){ data = new Date(); hour = data.getHours(); if((hour >= 12)){ hour = hour - 12; hour2 = hour % 10; hour1 = (hour-hour2) / 10 ; ampm = "pm"; }else{ hour2 = hour % 10; hour1 = (hour-hour2) / 10 ; ampm = "am"; } mine = data.getMinutes(); mine2 = mine % 10; mine1 = (mine - mine2) / 10; sec = data.getSeconds(); sec2 = sec % 10; sec1 = (sec - sec2) / 10; document.p0.src = ampm + ".jpg"; document.p1.src = hour1 + ".jpg"; document.p2.src = hour2 + ".jpg"; document.p3.src = mine1 + ".jpg"; document.p4.src = mine2 + ".jpg"; document.p5.src = sec1 + ".jpg"; document.p6.src = sec2 + ".jpg"; document.p7.src = "ten.jpg"; document.p8.src = "ten.jpg"; } setInterval("jikoku3()",1000); // --> </script> 表示がAM07時とかの表記になってしまいます。 それをAM/PMではなくて20時、23時等の24時間表示にするには どうしたら良いでしょうか? 本当に初歩的な質問をしてしまい失礼かと思いますが 宜しくお願い致します。

  • スライドショーにファイル名を表示させたい。

    400枚近いデジカメの写真のファイル(jpg)があります。 この中から気に入ったものを30~40枚選んでもらいたいのですが、 選んでもらう人がインターネット環境をもたないため、 (携帯は持っていますがパケ放題に加入はしていません) DVDに焼いて、DVDプレーヤーで見てもらいながら、 選んでもらおうと思っています。 そこでファイルを0001~0400のように番号をつけて、 スライドショーを作ろうと思っています。 1枚1枚のファイルにタイトルをつけるのは大変です。 ファイル名をタイトルに表示させるようにしたいのですが、 なかなかそのような機能を持ったソフトが見つかりません。 特にスライドショーにこだわりはないのですが、 何かいい方法はないでしょうか?

専門家に質問してみよう