• 締切済み

残像を残しながらjpg画像を自動的に切り替える方法

HPに残像を残しながらjpg画像を自動的に切り替える動画を、どのブラウザ(InternetExplorerやFirefox、Google Chrome等すべて)を使っても表示できる様にしたいのですが、それを可能にする方法はないでしょうか? サーバーは、ASJホスティングサービスを使っています。 記述は、JavaScriptを使用しており、現在InternetExplorerでのみ表示される状況です。 なお、サポートセンターに問い合わせて返ってきた回答が以下の通りです。 InternetExplorer以外にはfilterが実装されていないため、FirefoxやGoogle Chrome等のブラウザでは表示されていないかと思われます。 その為、同様の動作をするjsライブラリを利用されますか、flashなどに置き換えて利用下さい。 との事で、 現在の、JavaScriptの記述は以下の通りです。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=4000; var image= new Array(); image[0]='/フォルダ/画像1.jpg'; image[1]='/フォルダ/画像2.jpg'; image[2]='/フォルダ/画像3.jpg'; image[3]='/フォルダ/画像4.jpg'; image[4]='/フォルダ/画像5.jpg'; image[5]='/フォルダ/画像6.jpg'; image[6]='/フォルダ/画像7.jpg'; image[7]='/フォルダ/画像8.jpg'; image[8]='/フォルダ/画像9.jpg'; image[9]='/フォルダ/画像10.jpg'; image[10]='/フォルダ/画像11.jpg'; image[11]='/フォルダ/画像12.jpg'; image[12]='/フォルダ/画像13.jpg'; image[13]='/フォルダ/画像14.jpg'; image[14]='/フォルダ/画像15.jpg'; image[15]='/フォルダ/画像16.jpg'; image[16]='/フォルダ/画像17.jpg'; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>15) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> <BODY bgcolor="#ffffff" onLoad="imgchange()"> <DIV align="center"> <IMG src='img01.jpg' id="imgframe" style="filter:blendTrans"> </DIV> </BODY> これと同様の動作をするjsライブラリはありますか? また、画像をこれと同様の動きで表示させるいい方法はないでしょうか? よろしくお願いします。

みんなの回答

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

>表示させるいい方法はないでしょうか? サポートセンターからの回答の通りではないでしょうか? >これと同様の動作をするjsライブラリはありますか? その手のものは沢山作成されています。 検索してみればたくさんヒットするはずです。 <ごく 一例> http://weblearnlog.toypark.in/javascript/jquery/449/ http://phpjavascriptroom.com/?t=ajax&p=fadejs 自分好みのものを作成するにしても、jQueryなどのライブラリを使えば、 それほど大した手間ではないでしょう。

関連するQ&A

  • Javaにて画像を残像が残りつつ変化させリンクもつけたい。

    Javaにて画像を残像が残りつつ数秒ごとに変化させ、 さらにリンクを画像ごとに変え、マウスを置いたときにそれぞれ画像ごとに説明文が出るようにしたいのですが・・・ 説明文はマウスをおいたら付箋みたいに出るあれです。 下記のようなのは見つけて残像するのですが、 リンクなどをどこに挿入していいのかわかりませんので教えてください。 Javaは初心者なのですが休み中に解決してこいと言われました。 宜しくお願いします。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=5000; var image= new Array(); image[0]="img01.jpg"; image[1]="img02.jpg"; image[2]="img03.jpg"; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> <BODY onLoad="imgchange()"> <DIV align="center"> <img src='img01.jpg' id="imgframe" style="filter:blendtrans" width="300" height="401" alt="トップバナー" /><br /> <br />

  • javascriptの突然のエラー

    初めまして。 私は素人ながらもお店で使っている ホームページを自分で更新しています。 いくつかのjavascriptを見よう見まねで 使っていたのですが、 突然1つのプログラムが作動しなくなってしまいました。 ブラウザの設定は特にいじってませんし、 javascriptがエラーで作動しなくなったページは 正常に作動していた時から 更新していません。 他のページを更新作業中に気づいたんですが、 どう考えても理由がわかりません。 詳しい方いらっしゃいましたら、 どうか教えていただけませんでしょうか? よろしくお願いいたします。 使っているブラウザはグーグルクロームと IEの7です。 ホームページビルダー11を使っています。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=5000; var image= new Array(); image[0]='girlhtml/toppageno1.jpg'; image[1]='girlhtml/toppageno2.jpg'; image[2]='girlhtml/toppageno3.jpg'; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> > 長くなりましたがよろしくお願いいたします。

  • ジャバスクリプト、にお詳しい方!教えて下さい!!

    初心者ですが、会社HPを作成している者です、 自分で色々検索してみたのですが、分らない部分だけ、いくつか質問させて下さい! 1)TOPページに画像(写真)を入れ、残像を残しながら次の画像へ移る・・・というふうにしています。ですが、1つ目(下の欄にある「pc5.jpg」の画像)だけが最初に一瞬しか表示されません。他の画像と同じ時間表示するにはどうすればよいのでしょうか? ↓タグです。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=7000; var image= new Array(); image[0]='./img/pc1.jpg'; image[1]='./img/pc2.jpg'; image[2]='./img/pc3.jpg'; image[3]='./img/pc4.jpg'; image[4]='./img/pc7.jpg'; image[5]='./img/pc.jpg'; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>5) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> ~中略~ <img src="./img/pc5.jpg" width="698" height="300" id="imgframe" style="filter:blendTrans"> 2)if (ii>5) ii=0;これは、画像が5枚目にきたら0へ戻る、という意味まではわかるのですが、”最後の5まできたらそこで画像をストップさせる”ようにするにはどこをどう書き換えれば良いですか? あと、これはどうしようもないことかも知れませんが、 写真に文字を入れる際に「Jtrim」という無料ソフトを使っています。 ですが、アップして確認すると、文字がぼやけてしまいます(にじんでいるような・・) 上記の画像(写真)に、それぞれ文字を書き込みたいのですが、やはりきちんとしたソフトを使わなければ無理ですよね・・? 質問ばかりで申し訳ありませんが、どうぞ宜しくお願いいたします!!

  • Javaにて画像を変更させる動作が動かない

    他の質問サイトですが、「http://okwave.jp/qa/q4965584.html」に載っている方法で 質問者は、できたと解決済みになっているのですが、 そのまま利用しようとしても、動作しません。 こちらの記事2009年なので、もう古いのでしょうか? jquaryよりも使い勝手が良さそうなので、出来れば下記コードを 修正し使えるのであれば、使いたいです。 宜しくお願いします。 <html> <head> <title>sample</title> </head> <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=5000; var image= new Array(); var href= new Array(); var title= new Array(); image[0]="img01.jpg"; image[1]="img02.jpg"; image[2]="img03.jpg"; title[0]="トップバナー"; title[1]="2ndバナー"; title[2]="3rdバナー"; href[0]="http://www.google.co.jp"; href[1]="http://www.yahoo.co.jp"; href[2]="http://jp.msn.com/"; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.alt=title[ii]; imgframe.filters.blendTrans.Play(); anchar.href=href[ii]; anchar.title=title[ii]; ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgchange()',rtime); } //--> </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
  • IEでは動作するのですがChromeで動作しません

    画像をフェードインで切り替え、かつ各画像にリンクをはるというjavascriptを作成し、動作確認をおこなった所、IEでは動作するのですが、どうしてもChromeで作動しません。 原因がわからずかなり困ってしまっていますのでご教授頂ければ幸甚です。 以下ソースになります。 <SCRIPT type="text/javascript"> <!-- var time=3; var rtime=4000; var image= new Array(); var href= new Array(); var title= new Array(); image[0]="banner/main.jpg"; image[1]="banner/main2.jpg"; image[2]="banner/main3.jpg"; title[0]="トップバナー"; title[1]="2ndバナー"; title[2]="3rdバナー"; href[0]="http://www.google.co.jp"; href[1]="http://www.yahoo.co.jp"; href[2]="http://jp.msn.com/"; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.alt=title[ii]; imgframe.filters.blendTrans.Play(); anchar.href=href[ii]; anchar.title=title[ii]; ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgchange()',rtime); } </SCRIPT> <body onLoad="imgchange()"> <a href="http://www.google.co.jp" id="anchar" title="トップバナー"> <img src="banner/main.jpg" alt="トップバナー" width="578" height="378" border="0" id="imgframe" style="filter:blendtrans" /></a> 何卒宜しくお願い申し上げます。

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

    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自動画像切替にリンクの貼り方

    初めて質問させていただきます。宜しくお願いします。 現在、楽天ショップページを製作しております。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="画像URL1" style="filter:blendTrans(duration=2);">

  • javascriptで画像の切替えとCSSの指定

    javascriptで画像の切替えとCSSの指定でわかりません 以前、以下のhtmlを雑誌を見ながらやってみたのですが、わからないことが2点あります。 回答を頂ければ大変助かります。 1つ目の質問です。最初の画像が切り替わるのに10秒かかってしまうのですが、これを最初の画像とともにすべての画像の切替を5秒にしたいのですがわかりません。 2つ目の質問です。CSSで指定してある画像にあてはめたいのですが、書き方がわかりません。 以下のimgs[0] = "http://www.●.com/●1.jpg"; この部分に <div id="▲img"></div> を付けていいものなのか、 別な書き方があるのかがわかりません。 CSS側→ #▲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> 以上です。 何卒よろしくお願い致します。

  • 一定時間で変化する画像とリンク

    業者さんにトップのページを作成してもらいました。 一定時間で画像が変化するようになっているのですが、 その画像ごとにクリックした際に違うリンクを貼りたいのですが 初心者の為、よくわかりません。 下記ソースですが どこを編集したらよいのでしょうか? <!-- //変更秒間隔を指定 var sec = 5; sec = sec * 1000; arrI = new Array("top_P1.jpg","top_P2.jpg","top_P3.jpg") var num = arrI.length; var arrO = new Array(); for (var i=0;i<num;i++) { arrO[i] = new Image(); arrO[i].src = arrI[i]; } i = 0; function cngImg(){ if(document.all){ document.images.img.style.filter="blendTrans()"; document.images.img.filters.blendTrans.Apply(); } document.images.img.src = arrO[i].src; if(document.all){ document.images.img.filters.blendTrans.Play(); } i ++; if(i >= num){i = 0;} setTimeout("cngImg()",sec); } //-->

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

専門家に質問してみよう