アクセス毎に画像を順番に切替表示させるには
- ページにアクセスするごとに、画像を順番に切替たく調べていましたところ、Win IE6、IE7、Opera9.5にて画像自体が表示されず困っております。
- 画像切替の為のjsファイルには『top_image.js』と名づけ、以下の記述をしております。
- ブラウザによって結果が違うという事は、Javascriptに問題があるのかと思うのですが、原因が分かる方がいらっしゃいましたら何卒ご教授お願い致します。
- ベストアンサー
アクセス毎に画像を順番に切替表示させるには
いつもお世話になっております。タイトルの件で質問が御座います。 ページにアクセスするごとに、画像を順番に切替たく調べていましたところ、 以下のような質問・解答を見つけました。 http://oshiete1.goo.ne.jp/qa1683979.html http://oshiete1.goo.ne.jp/qa2988372.html 上記を参考にし、Javascriptは画像を表示させるHTMLには記述せず、HTML＋外部jsファイルにて表示させることにしましたが、 Win IE6、IE7、Opera9.5にて画像自体が表示されず困っております。 IEにおいては、画像部分が×印になり、×印のプロパティを見ると『undefined』となっております。 他のブラウザでは問題なく表示され、アクセスごとに画像も切り替わります。 画像切替の為のjsファイルには『top_image.js』と名づけ、以下の記述をしております。 ////////////////////// <!-- var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = 'image/top/img_main_1.jpg'; imgList[1] = 'image/top/img_main_2.jpg'; imgList[2] = 'image/top/img_main_3.jpg'; imgList[3] = 'image/top/img_main_4.jpg'; imgList[4] = 'image/top/img_main_5.jpg'; if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); document.write('<img src="'+imgList[imgNo]+'" alt="">'); if( ++imgNo >= imgList.length) imgNo = 0; var d=new Date(); d.setTime(d.getTime()+24*limit*60*60*1000); document.cookie='imgNo='+ imgNo +' ; expires='+d.toGMTString(); //--> ////////////////////// また、画像を表示させるHTMLには以下のように記述しました。 ////////////////////// <script src="top_image.js" type="text/javascript"> </script> <noscript><img src="image/top/img_main_1.jpg" width="500" height="500"></noscript> ////////////////////// ブラウザによって結果が違うという事は、 Javascriptに問題があるのかと思うのですが、 原因が分かる方がいらっしゃいましたら何卒ご教授お願い致します。
- tribal
- お礼率85% (24/28)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
・ ファイルtop_image.jsを以下の様にしてみてください。 ------------------------------------------------------------ var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = "image/top/img_main_1.jpg"; imgList[1] = "image/top/img_main_2.jpg"; imgList[2] = "image/top/img_main_3.jpg"; imgList[3] = "image/top/img_main_4.jpg"; imgList[4] = "image/top/img_main_5.jpg"; //if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); function getCookie(key) { tmp = document.cookie + ";"; tmp1 = tmp.indexOf(key, 0); if (tmp1 == -1) { return ""; } tmp = tmp.substring(tmp1, tmp.length); start = tmp.indexOf("=", 0) + 1; end = tmp.indexOf(";", start); return (unescape(tmp.substring(start, end))); } var cook1 = getCookie("imgNo"); if (cook1 == "") { imgNo = 0; } else { imgNo = parseInt(cook1); } document.write("<img src=\"" + imgList[imgNo] + "\" alt=\"\">"); if (++imgNo >= imgList.length) { imgNo = 0; } var d = new Date(); d.setTime(d.getTime() + 24 * limit * 60 * 60 * 1000); document.cookie = "imgNo=" + imgNo + " ; expires=" + d.toGMTString();
その他の回答 (4)
- fujillin
- ベストアンサー率61% (1594/2576)
ちょっと気になっただけなので、言わずもがなですが・・・ 表示されないブラウザは、ブラウザの設定でクッキー拒否になっていたりしてませんか？
お礼
fujillin様 御解答、有難う御座います。 下のauty様から頂いた御解答にお礼させて頂きました通り、 無事解決する事が出来ました。 お手数お掛け致しました。。。 有難う御座います！！
- auty
- ベストアンサー率58% (284/486)
・ LAN内で確認しましたが、IE6でも問題ありませんでした。 他に原因があるようです。 ＞＞＞ アップ・上書きされていない等気になりました もう1度、ファイル top_image.js の中身の確認をお願いします。
お礼
auty様 何度も何度もお手数お掛けしてしまい、申し訳有りませんでした。 結論から御報告致しますと、お陰様で無事表示されるようになりました！！ 原因はtop_image.js内に不要な半角スペースが1つ残っていた為でした。。。 普段そういう点に甘い（？）IEが、今回は厳しかったという感じでしょうか。。。 兎に角、本当にお世話になりました！ 大変親切な方にご教授頂き、問題解決とともに勉強させて頂く事が出来ました。 本当に有難う御座いました！！
- auty
- ベストアンサー率58% (284/486)
・ 動作は、IE7と、Firefoxで確認しています。 変化が全くないのか、現在どのような状況になったのか出来るだけ詳しくお知らせください。 <html> <head> <title></title> <script src="top_image.js" type="text/javascript"> </script> </head> <body> </body> </html>
お礼
auty様 何度もお手数お掛けして申し訳御座いません。。 状況としましては、 ▼Win IE6、Win IE7、Win Operaにて画像が表示されません。 ▼Win IE6 IE7につきましては、画像が表示されるべき箇所に”×印”が表示されており、”×印”のプロパティを見ると 『http://テストアップしているサーバURL/undefined』となっております。 Operaにおきましては、何も表示されません。 ▼その他ブラウザ（Win&Mac Firefox、Win&Mac Safari、Mac Opera）では問題なく表示されております。 ただ、ローカルファイルをIE6、IE7、Operaでブラウズすると画像は問題なく表示されるのですが、 サーバへアップしたファイルをブラウズすると上記3ブラウザでは表示されないのです。。。 サーバはロリポップを利用しております。 アップロードしたつもりのファイルが、 実はアップ・上書きされていない等気になりましたので、何度も確認しましたが、アップロードには問題御座いませんでした。。 また、HTMLのソースを以下に書かせて頂きます。 --------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>サイト名</title> </head> <body> <script src="top_image.js" type="text/javascript"> </script> <noscript><img src="image/top/img_main_1.jpg" width="710" height="350"></noscript> </body> </html> --------------------------------------------------- 以上、何度も申し訳御座いませんが、何卒宜しくお願い致します。
- auty
- ベストアンサー率58% (284/486)
＞＞＞ parseInt(document.cookie.substring(6,99)); ＞＞＞ Javascriptに問題があるのかと思うのですが、 上の様に、位置を決めうちにしているのが良くないのでは？ 参考URL http://oshiete1.goo.ne.jp/qa1683979.html の様にして、imgNoを求めてみてください。
お礼
auty様 早々の御解答、有難う御座います！ 私、Javascriptに関してはコピー・ペースト、 ペーストした数値のみを少し弄るという程度の知識でして・・・ 大変お手数ですが、具体的にご教授頂けますと大変有難く思います。 何卒宜しくお願い致します。
関連するQ&A
- アクセス毎に画像を順番に切替表示させる方法について
アクセス毎に画像を順番に切替表示させる方法について お伺いしますm(__)m アップル社ホームページ（http://www.apple.com/jp/）のように、 アクセス毎にメイン画像を順番に切替表示させるようにしたいと考え、 下記を参考に試してみました。 【参考】http://okwave.jp/qa/q4113556.html 実際に動作確認をしたところ、 上記の参考URL内「ANO.3」のお礼に書かれたものと同じように、 IE6（Win）、IE7（Win）、FireFox（Win＆Mac）で確認したとき、 ローカルでは動作確認できるにもかかわらず、 サーバーへアップロードして確認すると動作が確認できない状況となっております。 ※Safari（Win＆Mac）に関しては、サーバー上での動作確認ができました。 HTMLソースと外部jsファイル（top_image.js）の内容は下記の通りです。 【HTMLソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>読み込みごとに画像を順番に変えるJavascript</title> </head> <body> <script src="top_image.js" type="text/javascript"></script> <noscript><img src="img_1.jpg" /></noscript> </body> </html> 【外部jsファイル（top_image.js）】 var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = "image/top/img_main_1.jpg"; imgList[1] = "image/top/img_main_2.jpg"; imgList[2] = "image/top/img_main_3.jpg"; imgList[3] = "image/top/img_main_4.jpg"; imgList[4] = "image/top/img_main_5.jpg"; //if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); function getCookie(key) { tmp = document.cookie + ";"; tmp1 = tmp.indexOf(key, 0); if (tmp1 == -1) { return ""; } tmp = tmp.substring(tmp1, tmp.length); start = tmp.indexOf("=", 0) + 1; end = tmp.indexOf(";", start); return (unescape(tmp.substring(start, end))); } var cook1 = getCookie("imgNo"); if (cook1 == "") { imgNo = 0; } else { imgNo = parseInt(cook1); } document.write("<img src=\"" + imgList[imgNo] + "\" alt=\"\">"); if (++imgNo >= imgList.length) { imgNo = 0; } var d = new Date(); d.setTime(d.getTime() + 24 * limit * 60 * 60 * 1000); document.cookie = "imgNo=" + imgNo + " ; expires=" + d.toGMTString(); 以上となります。 原因が分かる方がいらっしゃいましたら何卒ご教授お願い致しますm(__)m！！
- ベストアンサー
- JavaScript
- アクセス毎に画像を順番に表示したい
お世話になります。 こちら（http://oshiete1.goo.ne.jp/qa2200463.html）の質問・解答を元に、 Javascriptでアクセス毎（更新毎）に5枚の画像を順番に表示する事が出来たのですが、 ブラウザの更新をしていくと、 1枚目画像→2枚目画像→3枚目画像→4枚目画像→5枚目画像→使用不可画像（undefined）となってしまいます。 5枚目画像が表示された後は、1枚目画像→2枚目画像・・・・というように ループさせたいのですが、問題点をご教授お願い致します。 なお、ソースは以下の通り記述しております。 <script type="text/javascript"> <!-- var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = 'img_1.jpg'; imgList[1] = 'img_2.jpg'; imgList[2] = 'img_3.jpg'; imgList[3] = 'img_4.jpg'; imgList[4] = 'img_5.jpg'; if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); document.write('<img src="'+imgList[imgNo]+'" alt="">'); if( ++imgNo > imgList.length) imgNo = 0; var d=new Date(); d.setTime(d.getTime()+24*limit*60*60*1000); document.cookie='imgNo='+ imgNo +' ; expires='+d.toGMTString(); //--> </script> <noscript><img src="img_1.jpg" width="500" height="500"></noscript>
- ベストアンサー
- JavaScript
- HPの背景をアクセスごとに順番に変更したいのですが
初めまして HPの背景をアクセスごとに順番に変更したいのですが ランダムに表示するスクリプトはあるのですが、 3つの背景画像を順番にループすることは可能でしょうか？ 因に背景でなく画像を順番にするスクリプトは見つけました（下記） <script type="text/javascript"> <!-- var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = 'img_1.jpg'; imgList[1] = 'img_2.jpg'; imgList[2] = 'img_3.jpg'; imgList[3] = 'img_4.jpg'; imgList[4] = 'img_5.jpg'; if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); document.write('<img src="'+imgList[imgNo]+'" alt="">'); if( ++imgNo >= imgList.length) imgNo = 0; var d=new Date(); d.setTime(d.getTime()+24*limit*60*60*1000); document.cookie='imgNo='+ imgNo +' ; expires='+d.toGMTString(); //--> </script> <noscript><img src="img_1.jpg" width="500" height="500"></noscript>
- 締切済み
- 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
- javascriptで画像表示変更が出来ない
ＨＴＭＬページで、javascriptを使ってそのページにアクセスするたびに、画像が変更させているのですが、ときどき画像が表示されません。 ソースは下記です。 画像が落ちないようにする方法はないのでしょうか？ 宜しくお願いします。 <script type="text/javascript"><!-- var imglist2 = [ [ "topimg/top-e001.jpg", "http://www.～.html" , "○○○"] , [ "topimg/top-e002.jpg", "http://www.～.html" , "○○○"] , [ "topimg/top-e003.jpg", "http://www.～.html" , "○○○"] , ]; function RandomImageLink2() { var selectnum = Math.floor(Math.random() * imglist2.length); var output = '<a href="' + imglist2[selectnum][1] + '" target="_blank">' + '<img src="' + imglist2[selectnum][0] + '"' + ' alt="' + imglist2[selectnum][2] + '">' + '</a>'; document.write(output); } //--></script>
- 締切済み
- JavaScript
- 画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
- JABASCRIPTなんですが・・・
<script language="JavaScript"> var imglist = new Array( "top_pic.jpg", "top_pic2.jpg", "top_pic3.jpg", "top_pic4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> ・・・・という画像をランダムに表示するスクリプトなんですが、 この画像を表示する際のオプション？みたいなのは何処に記入すればよいのでしょうか？ align="right"や、width="50%" みたいなやつです。 よろしくお願いします
- 締切済み
- ブログ
- JAVASCRIPTについて教えてほしいのですが
<script language="JavaScript"> var imglist = new Array( "top_pic.jpg", "top_pic2.jpg", "top_pic3.jpg", "top_pic4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> ・・・・という画像をランダムに表示するスクリプトなんですが、 この画像を表示する際のオプション？みたいなのは何処に記入すればよいのでしょうか？ align="right"や、width="50%" みたいなやつです。 よろしくお願いします
- ベストアンサー
- ブログ
- ＨＰトップに画像をランダム表示させる方法がわかりません
初歩的な質問ですみません。 ＨＰのトップ画面に表示している画像をランダムに変更したいのですが方法がいまいちわかりません。Javaのコードを入力すれば可能なようなのですがどこに入れたらいいのかわかりません。 私なりに下のどこかに入れたら反映されるだろうと思い何度か試してはみましたが上手くいきませんでした。 反映されると思った箇所 <!--メイン--> <td id="main" valign="top" width="570"><img height="382" alt="メインイメージ" src="images/CIMG0174.JPG" width="538" border="0"> <div id="news"> 入力したコード <script language="JavaScript"> var imglist = new Array( "flowerA.jpg", "flowerB.jpg", "flowerC.gif", "flowerD.gif" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> 【"flower"というファイル名は例えで入っています】 サイトのＵＲＬが必要な場合は載せさせていただきます。 ブラウザはjavaに対応しています。 質問や文章わかりづらいとは思いますが、お時間ありましたら知恵をお貸し下さい。 宜しくお願いします。
- 締切済み
- JavaScript
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。
- ベストアンサー
- JavaScript
お礼
auty様 御解答有難う御座います！！ お教え頂いた内容をコピーペーストしてみましたが、変化はありませんでした。。。 折角お教え頂いたのに申し訳御座いません。。。 HTMLですとIEでは問題無いのに他のブラウザでは問題アリ…という事は多々ありますが、 この度のJavascriptは真逆なので困惑しております。。 Javascript素人で申し訳御座いません！ 重ねてご教授頂けますと大変有難く思います。 何卒宜しくお願い致します。