Javascript画像切り替えIEでしか動かない

2023/09/04 22:44

このQ&Aのポイント

Javascriptで画像を切り替えています。IEでは動くのですが他のブラウザだと動きません。
FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。
<script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; 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,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">

ベストアンサー

Javascript画像切り替えIEでしか動かない

2013/05/24 16:22

Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; 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,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">

tamurad007
お礼率10% (21/192)

JavaScript
回答数2
ありがとう数1

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

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/05/24 17:30 回答No.1

こんにちは。 Firefoxやchromeが特殊なのではなくIEが特殊なのです。 filtersはIE専用であり他のブラウザでは解釈できず動かせません。 JavaScriptのライブラリであるjQueryを利用すると比較的簡単にほとんどのブラウザで似たような動きをさせることが出来ると思います。 jQuery　アニメーションみたいな感じで検索してみてください。

質問者

お礼 2013/05/24 18:23

ありがとうございます。できました！しかし、IEだけが特殊とは驚きました。 WEBのアクセス解析の仕事をしているのですが IEシェア8割。。うーん火狸、黒夢、動物園。。なんとかならぬものかｗ独り言です。。。

その他の回答 (1)

kool_noah
ベストアンサー率33% (95/285)

2013/05/24 18:11 回答No.2

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1244893652 似たような質問がありますね。やってることもほぼ同じでは？参考にしてみたらいかがでしょう

関連するQ&A

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
javascriptで画像の切替えとCSSの指定
javascriptで画像の切替えとCSSの指定でわかりません以前、以下のhtmlを雑誌を見ながらやってみたのですが、わからないことが２点あります。回答を頂ければ大変助かります。１つ目の質問です。最初の画像が切り替わるのに１０秒かかってしまうのですが、これを最初の画像とともにすべての画像の切替を５秒にしたいのですがわかりません。２つ目の質問です。CSSで指定してある画像にあてはめたいのですが、書き方がわかりません。以下のimgs[0] = "http://www.●.com/●1.jpg"; この部分に <div id="▲img"></div> を付けていいものなのか、別な書き方があるのかがわかりません。ＣＳＳ側→ #▲img { background-image: url(..●1.jpg); } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <script type="text/javascript"> var imgs = new Array(); var links= new Array(); imgs[0] = "http://www.●.com/●1.jpg"; imgs[1] = "http://www.●.com/●2.jpg"; links[0]="http://www.■.co.jp" links[1]="http://www.■.co.jp" i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); document.getElementById("link").href=links[i]; if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> </HEAD> <BODY> <a href="http://www.■.co.jp" id=link> <img src="http://www.●.com/●1.jpg" id="imgframe" style="filter:blendTrans(duration=2);"></img> </a> </BODY> </HTML> 以上です。何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
複数のjavascriptを貼り付けると、1つしか動きません。
「5秒ごとに残像を残しながら自動で画像が変わるスクリプト」を以下の通り作成いたしました。これが1つだったら起動するのですが、2つ以上貼り付けると最後に貼り付けたスクリプトしか起動しません。画像、IDを変えるなどして試しているのですが、上手くいきません。解決策がわかる方ご教授をお願いいたします。 <script type="text/javascript"> var nimgs = new Array(); nimgs[0] = "syasin/1/1/k1.jpg"; nimgs[1] = "syasin/1/1/k2.jpg"; nimgs[2] = "syasin/1/1/k3.jpg"; nimgs[3] = "syasin/1/1/k4.jpg"; nimgs[4] = "syasin/1/1/k5.jpg"; nimgs[5] = "syasin/1/1/k6.jpg"; nimgs[6] = "syasin/1/1/k7.jpg"; nimgs[7] = "syasin/1/1/k8.jpg"; nimgs[8] = "syasin/1/1/k9.jpg"; nimgs[9] = "syasin/1/1/k0.jpg"; i = 0; function Blend(imgframe){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = nimgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=nimgs.length) i=0; }; onload = function(imgframe){setInterval(Blend,5*1000)} </script> <IMG src="syasin/1/1/k0.jpg" id="imgframe" style="filter:blendTrans(duration=2);" width="218" height="218">
- ベストアンサー
- 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
IE10で画像切り替えがされません
いろんなサイトから情報を引っ張ってきて趣味程度でHPを作成しています。先日、IEを10にアップデートしました。おそらく、アップデートをきっかけに、今まで動作していた写真切り替えスクリプトが動作しなくなりました。他のPCではIE9を使用しており、今までどおり動作します。下記のようなスクリプトです。一定時間で画面が切り替わるようにし、各画像にリンクをはっていました。＜javascript部分＞ var href= new Array(); href[0]=""; href[1]="./aaa.html"; href[2]="./bbb.html"; href[3]="./ccc.html"; var BlendTrans_time=1; function go_BlendTrans(file_name) { BlendTrans_img.filters.BlendTrans.Apply(); BlendTrans_img.filters.BlendTrans.duration=BlendTrans_time; BlendTrans_img.src=file_name; BlendTrans_img.filters.BlendTrans.Play(); if(file_name == imgs[0]){lnk.href=href[0];} if(file_name == imgs[1]){lnk.href=href[1];} if(file_name == imgs[2]){lnk.href=href[2];} if(file_name == imgs[3]){lnk.href=href[3];} } var imgs = new Array(); imgs[0] = "00.JPG"; imgs[1] = "aa.jpg"; imgs[2] = "bb.jpg"; imgs[3] = "cc.jpg"; j = 0; function hyouji() { go_BlendTrans(imgs[j++]); if(j>=imgs.length) j=0; } function startfnc() { //関数hyouji()を5000ミリ秒間隔で呼び出す setInterval("hyouji()",5000); } ＜HTML部分＞ <a href="#" id="lnk"><img src="00.JPG" border="0" width="800" id="BlendTrans_img" style="filter:BlendTrans;"></a><br> いろいろ調べたのですが、IE10にアップデートしたことが原因という確証も得られませんでした。質問が複数で申し訳ないのですが、そもそも、IE10が上記のスクリプトをサポートしていないのでしょうか？また、IE10で動作しないのであれば、代替策はどのようにすればいいのでしょうか？
- ベストアンサー
- CSS
JavaScriptが旨く動きません
下記のタグをHEAD～/HEADの間にいれたのですが旨く行きませんよろしくお願いします <script language="JavaScript"> fad=0; function wipe(img){ fad++; fad%=5; img.filters.blendTrans.Apply(); img.src="t"+fad+".jpg"; img.filters.blendTrans.Play();} </script> BODY～/BODYの間へ入れています <img src="t0.jpg"style="filter:blendTrans(duration=3);width350px; height:350px;"onClick="wipe(this)">
- 締切済み
- Mac
javascriptのスライドショーで、ポイント時に代替テキストを表示するか、ポイントしなくてもキャプションを表示するためには？
初心者ですが何とかjavascriptで自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか？スタイルシートは使っていません。現在はこんな感じです。根本的に違うのでしょうか？できれば簡単な方法があればと思います。 head部には <SCRIPT>  </SCRIPT> 対象部分には <SCRIPT>  </SCRIPT>
- 締切済み
- その他(ソフトウェア)
javascriptの突然のエラー
初めまして。私は素人ながらもお店で使っているホームページを自分で更新しています。いくつかのjavascriptを見よう見まねで使っていたのですが、突然1つのプログラムが作動しなくなってしまいました。ブラウザの設定は特にいじってませんし、 javascriptがエラーで作動しなくなったページは正常に作動していた時から更新していません。他のページを更新作業中に気づいたんですが、どう考えても理由がわかりません。詳しい方いらっしゃいましたら、どうか教えていただけませんでしょうか？よろしくお願いいたします。使っているブラウザはグーグルクロームとＩＥの7です。ホームページビルダー11を使っています。 <SCRIPT language="JavaScript">  </SCRIPT> > 長くなりましたがよろしくお願いいたします。
- ベストアンサー
- JavaScript
Javaにて画像を残像が残りつつ変化させリンクもつけたい。
Javaにて画像を残像が残りつつ数秒ごとに変化させ、さらにリンクを画像ごとに変え、マウスを置いたときにそれぞれ画像ごとに説明文が出るようにしたいのですが・・・説明文はマウスをおいたら付箋みたいに出るあれです。下記のようなのは見つけて残像するのですが、リンクなどをどこに挿入していいのかわかりませんので教えてください。 Javaは初心者なのですが休み中に解決してこいと言われました。宜しくお願いします。 <SCRIPT language="JavaScript">  </SCRIPT> <BODY onLoad="imgchange()"> <DIV align="center"> <img src='img01.jpg' id="imgframe" style="filter:blendtrans" width="300" height="401" alt="トップバナー" /><br /> <br />
- ベストアンサー
- JavaScript
Javaにて画像を変更させる動作が動かない
他の質問サイトですが、「http://okwave.jp/qa/q4965584.html」に載っている方法で質問者は、できたと解決済みになっているのですが、そのまま利用しようとしても、動作しません。こちらの記事2009年なので、もう古いのでしょうか？ jquaryよりも使い勝手が良さそうなので、出来れば下記コードを修正し使えるのであれば、使いたいです。宜しくお願いします。 <html> <head> <title>sample</title> </head> <SCRIPT language="JavaScript">  </SCRIPT> <body onLoad="imgchange()"> <div align="center"> <a href="http://www.google.co.jp" id="anchar" title="トップバナー"> <img src="img01.jpg" id="imgframe" style="filter:blendtrans" width="300" height="401" alt="トップバナー" /> </a> </div> </body> </html>
- ベストアンサー
- Java