• 締切済み

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

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

みんなの回答

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

>どこを編集したらよいのでしょうか? 編集というよりも追加ですね。 画像のsrc(URL)と同様に、リンク先のURLを設定した配列を用意しておいて、画像の変更と同時に、その親要素の<a>タグのhrefの内容を変えるようにしてあげればよいです。 どこか一箇所代えるといのではなく、最初の部分に各URLの設定を追加、chgImgにhrefの変更を追加という具合です。 変更対象が違うので、imgの親要素の<a>にidなどを設定しておいて、document.getElementById('id')などでアクセスする方法が簡単でしょう。 作成元に依頼して変更してもらうのが、一番簡単で確実かと思います。

関連するQ&A

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

  • 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画像切り替え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);">

  • 複数枚画像を表示して一定時間で切り替える方法

    画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>~</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間(1000=1秒) var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません><

  • ロールオーバーで画像を先読みする方法

    スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか? お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }

  • 効果付きの画像変化

    画像を効果を付けて変化をさせて、三回変化したら、変化を終了させたいんですけど、下の記述に何を加えたら良いか分かりましたら教えて下さい。お願いします。 img#img1 { filter: progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2.0); } --> </style> <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <script type="text/javascript"> <!-- var ie = navigator.userAgent.indexOf("MSIE "); var verIE = 0, winIE = -1; if(ie >= 0) { verIE = parseFloat(navigator.userAgent.substr(ie + 5)); winIE = navigator.userAgent.indexOf("Windows"); } var photo = new Array("aki1.jpg", "aki2.jpg", "aki3.jpg"); var i = 0; function transImage2 () { var trans = 0; var img = document.images['img1']; if(verIE >= 5.5 && winIE >= 0) { if(img.filters) trans = img.filters[0]; } if(img.complete) { i++; if(i >= photo.length) i = 0; if(trans) trans.apply(); img.src = photo[i]; if(trans) trans.play(); } setTimeout("transImage2()", 4000); } //--> </script> </head> <body onload="setTimeout('transImage2()', 4000);"> <table> <tr> <td> <img name="img1" id="img1" src="aki1.jpg" width="240" height="180" alt=""> </td> </body>

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

  • 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
  • Netscape6でフレーム間での画像の変更

    あるページから別フレームの画像を切り替えるスクリプトを作成していて困っています フレーム1側ソース ... function _sendData(num){  window.top.frames[1]._imgChange(n); } ... <body onLoad="_sendData(n)"> ... フレーム2側ソース ... for (i=0;i<2;i++){img[i]=new Image();} img[0].src = "images/abc.jpg"; img[1].src = "images/def.jpg"; function _imgChange(num) {  nam = "imgname";  document.images[nam].src = img[num].src; } ... <img src="xyz.jpg" name="imgname"> ... 上記ソースのように作成しましたが IE5.5とネスケ4.75で正常に動作するのですが、Netscape6だけうまく動作しません 解決方法その他アドバイスお願いします

  • スライドショーなんですが・・・。

    スライドショーで 下記のようなHTMLなのですが 一回停止をクリックしてから 再開をクリックすると 一枚目の写真に戻るようになっています。 停止したところから再開するにはどう直せばよいのですか? よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; var flag = 1; var Fm = new Array(5); Fm[0]=""; Fm[1]=" 一枚目"; Fm[2]=" 二枚目"; Fm[3]=" 三枚目"; Fm[4]=" 四枚目"; Fm[5]=" 五枚目"; function timer() { if(document.img.complete) { document.img.filters.blendTrans.Apply(); document.img.src = "photo" + num + ".JPG"; document.img.filters.blendTrans.Play(); document.Fmess.fmess.value = Fm[num]; num++; if(num >5) num = 1; } if(flag == 1) { TimerID = setTimeout("timer()", 5000); } } function crl() { clearTimeout(TimerID); flag = 0; } function restart() { TimerID = setTimeout("timer()", 5000); num = 1; flag = 1; } //--> </SCRIPT> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="setTimeout('timer()', 6000)"> <CENTER> <IMG NAME="img" SRC="写真01.JPG" style="filter:blendTrans(duration=1)"> <FORM NAME="Fmess"> <INPUT TYPE="text" NAME="fmess" VALUE=" 説明 " SIZE=50> </FORM> <A HREF="JavaScript:crl()">[停止]</A>    <A HREF="JavaScript:restart()">[再開]</A>    <A HREF="JavaScript:window.close()">[終了]</A> </CENTER> <BR> </BODY> </HTML>

専門家に質問してみよう