IEとFirefoxで動かない!画像表示機能の問題

このQ&Aのポイント
  • IEとFirefoxで同じページ内で次の写真を表示する機能が正しく動作しない問題について
  • SafariとGoogle Chromeでは正しく動作するが、IEとFirefoxでは動かない
  • JavaScriptに関する知識がない状態でスクリプトを利用しているが、Windows版Firefoxでの動作確認ができていない
回答を見る
  • ベストアンサー

IEとFirefoxで動きません。(画像表示機能)

http://web.mac.com/tippex.sfpdm.0227/SHINMIURA/still_life_2.html 画像をクリックすると同じページ内で次の写真を表示する機能をJavaScriptで作ってみました。 SafarとGoogle Chrome (両方ともMac)では正しく動作するのですが、IEとFirefox(Mac)では正しく作動しません。Windows版のFirefoxは試せる環境が無いので確認出来ていません。 JavaScriptに関して、一切の知識が無い状態で色々なサイトを見てかき集めたスクリプトで動作させてる状態です。 なお、サイト自体はiWebを使いHTMLスニペットにJavaScriptを貼りつけています。なので、HTML全体を自ら作っているわけではありあせん。 なお、画像はflickrをソースにしています。 下記が、HTMLスニペットに書き込んだ、スクリプトです。 よろしくお願いします。 <a href=javascript:parapara()> <img src=http://farm5.static.flickr.com/4060/4279758936_9d887a858a.jpg name=name border=0> <script language=javascript> <!-- if(navigator.appVersion.charAt(0) >=5) { var paraImg= new Array(); paraImg[0] = new Image(); paraImg[0].src = "http://farm5.static.flickr.com/4060/4279758936_9d887a858a.jpg"; paraImg[1] = new Image(); paraImg[1].src = "http://farm5.static.flickr.com/4068/4279758858_907a3d1047.jpg"; paraImg[2] = new Image(); paraImg[2].src = "http://farm5.static.flickr.com/4029/4279014977_9757c50436.jpg"; paraImg[3] = new Image(); paraImg[3].src = "http://farm5.static.flickr.com/4043/4279758682_e2b19578ba.jpg"; paraImg[4] = new Image(); paraImg[4].src = "http://farm5.static.flickr.com/4071/4279758616_9605cd0dec.jpg"; } var paraCount = 0; function parapara() { if(paraCount < paraImg.length-1) { paraCount++; } else { paraCount = 0; } document.images["name"].src = paraImg[paraCount].src; } //--> </script>

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

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

win環境ですが… <a href="#" onclick="parapara();return false;"> とか? ついでに(これは関係ないけど) function parapara() { paraCount = ++paraCount % paraImg.length; document.images["name"].src = paraImg[paraCount].src; } とか… でも、手元にあるIE(6)だとappVersionで4.0を返すので、エラーになって動作しません。 チェックをはずせば動作します。 FF(3.5)はもちろんOKでした。

SHINFRANK
質問者

お礼

素晴らしいです!! <a href="#" onclick="parapara();return false;">に変えるだけで表示できなかったもので表示できるようになりました! 本当にありがとうございます。

関連するQ&A

  • ← →クリックで前後できるスライドショー

    現在、下記のJavaでスライドショーを使っているのですが、写真が前後出来ません。 スクリプトに改良を加えることによって、← →で前後移動できるようにする方法はありますか?また、写真ごとに、左下にキャプションを付けられるようになるとより良いのですが。 初心者で四苦八苦してる状態です。よろしくお願いします。 ちなみに、スライドショーはこんな感じです。 http://www.shinmiura.com/main/Shin_Miura___Portrait.html <Div Align="center"><a href="#" onclick="parapara();return false;"> <img src=http://www.shinmiura.com/image/poartrait/1_1.jpg name=name border=0> <script language=javascript> <!-- if(navigator.appVersion.charAt(0) >=4) { var paraImg= new Array(); paraImg[0] = new Image(); paraImg[0].src = "http://www.shinmiura.com/image/poartrait/1_1.jpg"; paraImg[1] = new Image(); paraImg[1].src = "http://www.shinmiura.com/image/poartrait/1_2.jpg"; paraImg[2] = new Image(); paraImg[2].src = "http://www.shinmiura.com/image/poartrait/1_3.jpg"; paraImg[3] = new Image(); paraImg[3].src = "http://www.shinmiura.com/image/poartrait/1_4.jpg"; paraImg[4] = new Image(); paraImg[4].src = "http://www.shinmiura.com/image/poartrait/2_1.jpg"; paraImg[5] = new Image(); paraImg[5].src = "http://www.shinmiura.com/image/poartrait/2_2.jpg"; paraImg[6] = new Image(); paraImg[6].src = "http://www.shinmiura.com/image/poartrait/2_3.jpg"; paraImg[7] = new Image(); paraImg[7].src = "http://www.shinmiura.com/image/poartrait/2_4.jpg"; paraImg[8] = new Image(); paraImg[8].src = "http://www.shinmiura.com/image/poartrait/2_5.jpg"; } var paraCount = 0; function parapara() { if(paraCount < paraImg.length-1) { paraCount++; } else { paraCount = 0; } document.images["name"].src = paraImg[paraCount].src; } //--> </script></Div>

  • ランダムなフェードインを作りたいです。

    jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>

    • ベストアンサー
    • AJAX
  • 以下の画像のユニフォームやウインドブレーカーのエメラルドグリーン部分の本当のRGB値を教えて下さい。

    以下の画像のユニフォームやウインドブレーカーのエメラルドグリーン部分の本当のRGB値を教えて下さい。 ユニフォーム http://www.ebbets.com/images/large/hai61r.jpg http://farm4.static.flickr.com/3561/3825594916_74d8436c48_o.jpg http://farm3.static.flickr.com/2478/3825594882_606ff63ac8_o.jpg http://farm3.static.flickr.com/2630/3825594828_46f2693622_o.jpg http://farm4.static.flickr.com/3511/3824793441_de954bb45d_o.jpg http://farm3.static.flickr.com/2503/3825594764_ac0ab79731_o.jpg http://farm3.static.flickr.com/2442/3824793377_50b44abdf4_o.jpg ウインドブレーカー http://blog-imgs-31.fc2.com/l/u/n/lunkerrush/islanders1.jpg http://blog-imgs-31.fc2.com/l/u/n/lunkerrush/islanders2.jpg 「GetRGB」というフリーソフトを用いても、実際の画像には影やブロックノイズ等の影響で少しポインタを動かしただけで色んな値が出てしまいます。 御存知の方は御回答を宜しく御願い致します。

  • どこがおかしいのか教えて下さい。

    一定時間で画像が切り替わるJavaScriptを使用したいと思っているのですが、ページでエラーが発生しました、と コメントが出て、画像が切り替わりません。 おかしな所があったら教えて下さいませ。 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  Image_no = 1;    Images = new Array();    Images[1] = new Image();   Images[1].src = "01.jpg";  Images[2] = new Image();  Images[2].src = "02.jpg";  Images[3] = new Image();  Images[3].src = "03.jpg";  Images[4] = new Image();  Images[4].src = "04.jpg";  function change_image() {     document.image.src = Images[Image_no].src;   Image_no = Image_no + 1;   if( Image_no > 4 ) {    Image_no = 1;   }  } </SCRIPT> </HEAD> <BODY onLoad="setInterval('changeImg()',10000)> <IMG src="01.jpg" name="Goods"        width=400 onLoad="setTimeout( 'change_image()', 10000 )"  </BODY> </HTML>

  • ボタンをMouseOverで、ボタン画像と指定先画像を同時に変えたい

    どちらか片方ならできるのですが、本当に同時にできるのかも分かりません。 スクリプトの記述が違うのだと思うのですが。 他の方法でも構いません、ご教授お願いします。 指定画像(name:a1)にmain01.jpgを表示させるスクリプト <script Language="JavaScript"> <!-- if(document.images){ b2 = new Image(); b2.src="main01.jpg"; } else{ b2 = "" document.a1 = "" } //--> </script> <script language="JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } ~中略~ ここはDreamweaverで作られたスクリプトなので間違いないと思います。 ボタンのロールオーバーイメージのスクリプトです。 //--> </script> HTML記述 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu00','','menu01.gif',1) document.a1.src='main01.jpg'"><img name="menu00" border="0" src="menu00.gif" width="173" height="32"></a>

  • 画像のランダム表示

    初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか? onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか? よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>

  • クリックするたびに画像を変える

    初心者なんですが、下記のようなスクリプトを使っています。(これ自体はうまく動作しています。) これはページ内に一つ画像をクリックするたびに別の画像を表示させていくのですが、 二つ並べてみようと試みたのですが、どうもうまくいきません。同じスクリプトの名前なり番号を付けるなりすればいいのでしょうか? 初心者の私に出来る限り判りやすく教えて頂けませんか?よろしくお願いします。 <SCRIPT Language="JavaScript"> <!-- if(navigator.appVersion.charAt(0) >=3) { var changeImg= new Array(); changeImg[0] = new Image(); changeImg[0].src = "blank1.jpg"; changeImg[1] = new Image(); changeImg[1].src = "5.bmp"; changeImg[2] = new Image(); changeImg[2].src = "6.bmp"; changeImg[3] = new Image(); changeImg[3].src = "7.bmp"; changeImg[4] = new Image(); changeImg[4].src = "8.bmp"; var changeCount = 0; function change() { if(changeCount < changeImg.length-1) { changeCount++; } else { changeCount = 0; } document.images["change_img"].src = changeImg[changeCount].src; } } //--> </SCRIPT> 画像の部分には下記のような設定をしています。 <A HREF="javascript:change()"><IMG SRC="blank1.jpg" width="450" height="213" name="change_img" border="0"> ちなみに使用する画像は5枚か6枚で、共用してそれぞれ別の枠内に呼び出すことも可能でしょうか? 例えば1.jpgという画像を2枚並べたりという意味です。

  • サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

    お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか? ■記述1(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> ■記述2(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]; } ■記述3(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>" ) ; } ■記述4(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" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • 1つのファイルで画像をクリックしたら差し代わる方法

    表題のようにJavascriptで1つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか? Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //1つ目の画像に関係する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> //2つ目の画像に関係する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は下記の通りです。 <!--1つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--2つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>

  • 画像切り替える&画像何千枚でもコード増やさない方法

    html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、 うまく動作しません。 1つ目の質問は、 document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。 document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか? 2つ目の質問ですが、 このプログラムは6枚の画像が切換えの対象になっていますが、 これが300枚とかになるとプログラムが増えて大変です。 GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; という風にしているところを var GAZO = new Array(); for(n=0; n<6; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = "n.jpg"; } という風にすればできると思ったのですが、できませんでした。 n.jpgが""で囲まれて変数のnがただの文字列と見られているのかもと思い、 'GAZO[n] = new Image(50,50); GAZO[n].src = '+'"'+n+'.jpg'+'"'; このようにしてみましたがダメでした。 画像の枚数が何千枚になってもプログラムが増えない方法はありますか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript"> <!-- var Bifor = new Array(); Bifor[0] = new Image(50,50); Bifor[0].src = "befor0.jpg"; Bifor[1] = new Image(50,50); Bifor[1].src = "befor1.jpg"; Bifor[2] = new Image(50,50); Bifor[2].src = "befor2.jpg"; Bifor[3] = new Image(50,50); Bifor[3].src = "befor3.jpg"; Bifor[4] = new Image(50,50); Bifor[4].src = "befor4.jpg"; Bifor[5] = new Image(50,50); Bifor[5].src = "befor5.jpg"; function first(){ for(i=0; i<6; i++){ 'document.getElementById("after' + i + '").src' = Bifor[i].src; } } var GAZO = new Array(); GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; GAZO[1] = new Image(50,50); GAZO[1].src = "1.jpg"; GAZO[2] = new Image(50,50); GAZO[2].src = "2.jpg"; GAZO[3] = new Image(50,50); GAZO[3].src = "3.jpg"; GAZO[4] = new Image(50,50); GAZO[4].src = "4.jpg"; GAZO[5] = new Image(50,50); GAZO[5].src = "5.jpg"; function change(m){ 'document.getElementById("after' + m + '").src' = GAZO[m].src; } //--> </script> </head> <body onload="first()"> <form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる <GAZO src="title.jpg"> <table> <tr> <td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td> <td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td> <td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td> </tr> <tr> <td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td> <td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td> <td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td> </tr> </table> <input type="button" value="元に戻す" onclick="first()"> </form> </body> </html>

専門家に質問してみよう