• 締切済み

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);">

みんなの回答

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

imgframeが定義されていませんね。 <img src="画像URL1" style="filter:blendTrans(duration=2);">    ↓ <img id="imgframe" src="画像URL1" style="filter:blendTrans(duration=2);">

関連するQ&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で画像の切替えと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> 以上です。 何卒よろしくお願い致します。

  • 複数の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">

  • 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の突然のエラー

    初めまして。 私は素人ながらもお店で使っている ホームページを自分で更新しています。 いくつかの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> > 長くなりましたがよろしくお願いいたします。

  • JavaScriptのスライドショー IE以外のブラウザで再生できない

    JavaScriptのサンプルソースを提供されている方のサイトから コピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか? <script> <!-- var img = "1.jpg,2.jpg,3.jpg"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 4000); //--> </script>

  • 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で自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか? スタイルシートは使っていません。 現在はこんな感じです。 根本的に違うのでしょうか?できれば簡単な方法があればと思います。 head部には <SCRIPT> <!-- var img = "1.JPG,2.JPG,3.JPG"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </SCRIPT> 対象部分には <SCRIPT> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 3000); //--> </SCRIPT>

  • 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
  • 一定時間で変化する画像とリンク

    業者さんにトップのページを作成してもらいました。 一定時間で画像が変化するようになっているのですが、 その画像ごとにクリックした際に違うリンクを貼りたいのですが 初心者の為、よくわかりません。 下記ソースですが どこを編集したらよいのでしょうか? <!-- //変更秒間隔を指定 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); } //-->

専門家に質問してみよう