- 締切済み
フォルダ内の画像にリンクを指定するには？
html本文には画像パスを指定せずに、スクリプト（画像を連番で読み込む）にて指定しています。 その場合、連番の最初の「001.jpg」にはリンクを指定出来るのですが、以降の「002.jpg」～は指定が出来ません。 これを解決するためにはどうしたらいいでしょうか？ あらかじめ、連番すべてにリンクを指定したものを読み込ませるとか・・・？ （いくつかを考えてみたのですが、解決に至っておりません） 以下、ご確認お願い致します。 （一部抜粋しております） <script language="JavaScript"> <!-- // 以下スクリプト設定部分 FITime=0; // n=100; // Lnum=4; // cnt=0; // Fna="test"; // Fexp="jpg"; // // 以下スクリプト本体 function fade(){ n=n+2; if(n>=100) clearInterval(TM) else{ test.filters(0).opacity=n;} } function ChangeNext(){ n=0; cnt++;if(cnt>Lnum){cnt=0;} document.test.src=Fna+cnt+"."+Fexp; TM=setInterval("fade()",FITime) } function ChangeBack(){ n=0; cnt--;if(cnt<0){cnt=Lnum;} document.test.src=Fna+cnt+"."+Fexp; TM=setInterval("fade()",FITime) } //--> </script> </head> <body> <img src="test001.jpg" name="test" border="0" />
- meiki1204
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- luka3
- ベストアンサー率74% (300/403)
meiki1204さんが期待しているのは、ChangeBack()が呼ばれたときに画像ファイルが「test002.jpg」になることだと思いますが、実際にセットされるのは「test2.jpg」になります。 以下のように修正してみてください。 document.test.src=Fna+("00"+cnt).slice(-3)+"."+Fexp;
関連するQ&A
- javascriptでループをやめたい
javascript初心者です。 下記の様にソースが書いてあります。 画像が表示され、順番に表示されるのはいいのですが、 最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、 表示されてしまいます。最後の画像になった時に、表示を止め、 最後の画像のまま表示を止めたいのですが、わかりません。 ご教示お願いいたします。 <SCRIPT language="JavaScript"> <!-- FITime=1; FOTime=8; n=10; flg=1; num=0; cnt=7; Fna="./img"; Fexp="jpg"; // 以下スクリプト本体 function fade(img){ if(flg==1){ document.images[img].src=Fna+num%cnt+"."+Fexp; if(n<=0) flg=0; document.images[img].filters['alpha'].opacity=n; if(n>=99)speed=0.05;else speed=5; n-=speed; setTimeout("fade('"+img+"')",FOTime); } else{ document.images[img].src=Fna+(num+1)%cnt+"."+Fexp; document.images[img].filters['alpha'].opacity=n; if(n>=98)speed=0.05;else speed=2; n+=speed; if(n>=100) {flg=1;++num;if(num%cnt==0){num=0;}} setTimeout("fade('"+img+"')",FITime); } } //--> </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">
- ベストアンサー
- JavaScript
- サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？ ■記述１(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述２(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述３(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述４(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ |￣￣￣￣￣￣￣| | 拡大画像 | |＿＿＿＿＿＿＿| |￣||￣||￣||￣| |＿||＿||＿||＿|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 指定時間ごとに画像とリンク先を変えるには？
バナーが指定時間ごとに変わるページを 作りたいと思っているのですが 下記のソースではどうもうまくいきません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <TITLE>指定時間毎に画像とリンク先を変えるには？</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" onLoad="banner()"> <SCRIPT language="JavaScript"> <!-- num=1; function banner(){ if(num==1){ document.photo.src="img/no_0.gif", document.photo.href= "http://www.test.co.jp/0"; num=2; }else if(num==2){ document.photo.src="img/no_1.gif", document.photo.href= "http://www.test.co.jp/1"; num=3; }else if(num==3){ document.photo.src="img/no_2.gif", document.photo.href= "http://www.test.co.jp/2"; num=4; }else if(num==4){ document.photo.src="img/no_3.gif", document.photo.href= "http://www.test.co.jp/3"; num=5; }else if(num==5){ document.photo.src="img/no_4.gif", document.photo.href= "http://www.test.co.jp/4"; num=6; }else if(num==6){ document.photo.src="img/no_5.gif", document.photo.href= "http://www.test.co.jp/5"; num=1; } setTimeout("banner()",5000); } //--> </SCRIPT> <a href="http://www.test.co.jp/ng" NAME="photo"><IMG SRC="img/1.jpg" NAME="photo" ALIGN="BOTTOM" WIDTH="60" HEIGHT="110" BORDER="0"></a> </BODY> </HTML> 画像は変わるのですがリンク先が変わらないようで…。 どなたかご指示をいただけないでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- 指定のフォルダに指定のファイルがあったら画像を表示、なければ飛ばすいい方法（ＣＧＩ）
指定のフォルダに指定のファイルがあったら画像を表示、なければ飛ばすというようにしたいのです。 opendir (FOLDER,"img"); @FOLDERS = readdir (FOLDER); closedir(FOLDER); my ($cnt) = 0; foreach(@FOLDERS) { if ($_ =~ /.+\..+/) { $cnt++; } } $tate = $cnt/10; print "<TABLE CELLSPACING=0 CELLPADDING=2>\n"; print "<TR>\n"; for($i=1;$i<11;){ for($n=2;$n<$cnt;$n++){ $F = $FOLDERS[$n]; if("$i.jpg" eq "$F"){ print "<TD CLASS=TD1><IMG SRC='img/$i.jpg' HEIGHT=65 WIDTH=50><BR>$i</TD>\n"; $i=$i+1; } #if } #for $n } #for $i というようにしてみたのですが時間がかかりすぎてしまいます。 何かいい方法はないでしょうか？
- 締切済み
- CGI
- 画像を入れ替えたい
こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、１枚目から２枚目に入れ替えるだけで終わらせたいのです。for文を使えばいいとのかなと思うのですが、どこにforを入れたら良いのか分かりません。あるいはもっと簡単なやり方があるのでしょうか・・・。急いでやらないといけないので教えていただけたらと思います。どうぞよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 指定時間経過後に画像を一定時間で切替
Javascriptで指定時間経過後に画像を一定時間で切替したいと思っています。 一定時間の画像切替は以下のように実現しています。このJavascriptにさらに”指定時間経過後”という条件を付けたいのですがどうしたらよいでしょうか？ ■Javascript <script> $(document).ready(function(){ $('.slideImg img:gt(0)').hide(); setInterval(function() { $('.slideImg :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideImg '); },5000); }); </script> ■HTML <div class="slideImg "> <img src="img1.jpg" alt="" /> <img src="img2.jpg" alt="" /> <img src="img3.jpg" alt="" /> </div> ■CSS .slideImg{ position:relative; width: 100px; height: 100px; } .slideImg img{ position:absolute; left:0; top:0; }
- ベストアンサー
- JavaScript
- 画像と文字を同時に切り替えたい
お世話になります。どうしてもできなくて困っています。 <script> var n=1; var msg = ["テキスト1", "テキスト2", "テキスト3", "テキスト4", "テキスト5", "テキスト6", "テキスト7"]; function change(){ i++; document.img.src="../img/test" + n+ ".jpg"; } </script> <a href="JavaScript:change();"><img src="../img/test1.jpg" name="img"/></a> <script> document.write((msg[i++])); </script> これで、画像をクリックすると、画像はどんどん切りかわっていきますがその下のテキストが切り替わりません！ずっとテキスト1が出たまんまなんです。どうしたらいいのかわかりません！分かる方、ぜひ教えてください
- ベストアンサー
- JavaScript
- クリックでリンク先の切り替え
お世話になっています。 基本かもしれませんが、どうしても分からないので質問させてください。 クリックしたときにリンク先を変更したいのです。 <script> var i=1; function change(){ i++; if(0==i%2){ document.shop_img.src="test1.jpg"; }else{ document.shop_img.src="test2.jpg"; } } </script> クリックされた回数に応じて、画像の切り替えとリンクの切り替えをしたいのです。 <a href="http://www.test.jp"><img src="test2" name="shop_img" /></a> 画像の切り替えはOKで、あとは画像を囲っているリンク先のURLをクリックするごとに切り替えしたいのですが、どうしても分かりませんでした。 分かる方、ぜひ教えてください！
- ベストアンサー
- JavaScript
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
- JavaScript自動画像切替にリンクの貼り方
初めて質問させていただきます。宜しくお願いします。 現在、楽天ショップページを製作しております。JavaScriptでゆっくりと画像を切り替える以下のソースをネットで調べました。さらに実用的にするため、各画像にそれぞれ異なるリンクを貼りたいのですが、どのように追記すれば良いのでしょうか？ 色々試したのですが全く解決せず困っています。宜しくお願いいたします。 [以下ソース] <script type="text/javascript"> var imgs = new Array(); imgs[0] = "画像URL1"; imgs[1] = "画像URL2"; imgs[2] = "画像URL3"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <img src="画像URL１" style="filter:blendTrans(duration=2);">
- 締切済み
- JavaScript
補足
luka3様 ご回答ありがとうございます。 コードを省略しており、肝心の所？を記載漏れしておりました。 申し訳ございません。 「001.jpg」以降はmapで指定した位置をクッリクすれば「002.jpg」「003.jpg」．．．「001.jpg」と動きます。 「001.jpg」にはリンクを付けることが出来るのですが、それ以降にリンクを付けることが出来ません。 リンクを付けることは出来ますでしょうか？ コード本文は下記の通りになります。 <body> <div onload="MapLoad()"><img src="test001.jpg" usemap="#MapChange" name="test" border="0" /></div> <map name="MapChange"> <area onmouseover="MapChange.src='test001.jpg'" onmouseout="MapChange.src='test001.jpg'" onClick="ChangeBack()" shape="circle" coords="a,b,c" /> <area onmouseover="MapChange.src='test001.jpg'" onmouseout="MapChange.src='test001.jpg'" onClick="ChangeNext()" shape="circle" coords="a,b,c" /> </map> </body>