- ベストアンサー
一定時間で画像とリンク先を変換する
- DreamWeaverCS3を使用してHPを製作しており、リンクが設定された画像を一定時間ごとに変換し、リンク先のページをポップアップウィンドウで開こうとしています。
- 現在のコードではポップアップウィンドウは正常に開くことができますが、一定時間での画像の変換がうまくいっていません。
- これについてご教授いただけると幸いです。
- hbf79ghm16oh6
- お礼率40% (2/5)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
え～っと。 this.hrefはクリックされた時に（評価して）リンク要素のhref属性を取得するためなので、クォーテーションで囲む必要はありません。 （というか、囲むと単なる文字列として扱われるのでうまく動かない）それなので document.write("<a href='"+jmp[n]+"' onclick=\"window.open(this.href,'','width=400,height=380'); return false;\">"); のような感じで。（説明不足のようでした。すみません。） あと、<SCRIPT language="JavaScript"> の部分は type="text/javascript" にしたほうがよろしいかと。 ついでながら、 document.writeだとスクリプトオフのユーザには表示されなくなるので、一旦表示しておいて同じことを行うのならこんな感じ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #img_navi{width:300px; height:25px; border-style:none;} //--> </style> </head> <body> <div> <a href="00000.html" onclick="return hoge(this)"> <img id="img_navi" src="00000.jpg" alt="image for navi"> </a> </div> <script type="text/javascript"> <!-- (function(){ var n = 0, interval = 5000; var data = [ ["00000.jpg", "00000.html"], ["11111.jpg", "11111.html"], ["22222.jpg", "22222.html"], ["33333.jpg", "33333.html"] ]; var node = document.getElementById("img_navi"); setInterval(function(){ n = ++n % data.length; node.src = data[n][0]; node.parentNode.href = data[n][1]; }, interval); })(); function hoge(elm){ window.open(elm.href, "", "width=400, height=380"); return false; } //--> </script> </body> </html>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
再度、#1です。 ちょっと勘違いをしていました。ごめんなさい。 window.openで別画面に開いていたのですね。 onclick内のスクリプトが対応していませんでしたね。（すみません。うっかりしてました。） 別関数にしてしまったほうがわかりやすそうな気がしますが、とりあえず、ご提示のソースの onClick=\"javascript:window.open('"+jmp[n]+"','',～～～ のjmp[n]がリンク固定の原因になっていますので、それを this.href と入替えてください。 多分、ご希望のように動作するはずです。
補足
♯1様 こちらからのご返信の前に追加のご回答を頂き、ありがとうございます。 説明が足りなくて申し訳ありませんでした。 ♯1様が仰る通り、リンク先を別ウィンドウで展開することを目指しています。 "00000.jpg"と"11111.jpg"はindex.html上の画像ボタンです。 index.html上で上記の画像ボタンが5秒毎に入れ替わりながら表示されています。 "00000.jpg"をクリックするとindex.htmlはそのままで "00000.html"が別ウィンドウにて開きます。 "11111.jpg"をクリックすると "11111.html"がさらに別のウィンドウにて開く設定にしたいと考えております。 "00000.html"の内容を見た後で"11111.html"も見たければ、index.html上で画像が"11111.jpg"に切り替わるの待ってクリックしてもらうという趣旨です。 ♯1様からのご回答を反映してみたのですが、 指定したファイルサイズで別ウインドウは開くのですが、そのウィンドウに --------“ファイルが見つかりません” “/Users/私のOS登録名/Documents/当サイト第1階層フォルダ名/当サイト第2階層フォルダ名/undefined”にファイルがありません。-------- と、いう表示が出てしまいました。 ちなみに現在はローカル環境で検証しています。 お手数おかけして本当に申し訳ないのですが、現状ソースの訂正点をぜひご指摘頂きたくお願い申し上げます。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間（1000=1秒） jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "uranai_file/shumai/uranai_shumai.html"; img[0] = "uranai_file/uranai_head_shumai.jpg"; jmp[1] = "uranai_file/baum/uranai_baum.html"; img[1] = "uranai_file/uranai_head_baum.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+this.href+"','','width=400,height=380'); return false;\">"); document.write("<img src='"+img[n]+"' border='0' width='300' height='25' />"); document.write("</a>"); var node = document.getElementsByTagName("img"); node = node[node.length-1]; setInterval(function(){ n = ++n % jmp.length; node.src = img[n]; node.parentNode.href = jmp[n]; }, 5000); //--> </SCRIPT> 或いは♯1様が推奨されるソースがあれば、ご提示頂ければ幸いです。 頼りきりになってしまい、本当に恐縮ですが、ご回答お待ち申し上げます。
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞しかし、最初に "00000.jpg"をクリックして"00000.html"にジャンプすると ＞その後で"11111.jpg"をクリックしても"00000.html"しかジャンプできず 全貌がわからないので、ご質問の意味がよくわかりません。 最初に、00000.htmlにジャンプしたら画面が遷移するので、「その後で"11111.jpg"をクリックしても」というのがどういう状態を意味しているのでしょうか？ 通常なら、00000.htmlの内容が表示されているはずと思いますが、そちらにも似たような画像があるということでしょうか？ かりにそうだとすれば、見た目は似ていても表示しているものが違うのでは？ 同じように動作させたいのであれば、そちらにも同じような仕組みを持たせればよろしいかと。
- fujillin
- ベストアンサー率61% (1594/2576)
document.writeで出力するのってあまり好きではないですが… とりあえず、document.write("</a>");の後ろに var node = document.getElementsByTagName("img"); node = node[node.length-1]; setInterval(function(){ n = ++n % jmp.length; node.src = img[n]; node.parentNode.href = jmp[n]; }, 5000); とかではダメでしょうか？
補足
fujillin様 早速のご回答、誠にありがとうございます。 戴いたコードを入力しましたところ、5秒ごとに画像が入れ替わるようになりました。 ありがとうございます。 しかし、最初に "00000.jpg"をクリックして"00000.html"にジャンプすると その後で"11111.jpg"をクリックしても"00000.html"しかジャンプできず、 同じように、最初に "11111.jpg"をクリックして"11111.html"にジャンプすると その後で"00000.jpg"をクリックしても"11111.html"にしかジャンプできませんでした。 私のコードの不手際だと思うのですが、どこに不具合があるのか今一度、ご教授頂きたくお願い申し上げます。 下記がそのコードです。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間（1000=1秒） jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "uranai_file/shumai/uranai_shumai.html"; img[0] = "uranai_file/uranai_head_shumai.jpg"; jmp[1] = "uranai_file/baum/uranai_baum.html"; img[1] = "uranai_file/uranai_head_baum.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+jmp[n]+"','','width=400,height=380'); return false;\">"); document.write("<img src='"+img[n]+"' border='0' width='300' height='25' />"); document.write("</a>"); var node = document.getElementsByTagName("img"); node = node[node.length-1]; setInterval(function(){ n = ++n % jmp.length; node.src = img[n]; node.parentNode.href = jmp[n]; }, 5000); //--> </SCRIPT>
お礼
fujillin様 この度は本当にありがとうございました。 頂いた解決法で見事、意図していた展開ができるようになりました。 これで進行中のサイトが完成します。 当方の勉強不足で大変お手数をおかけしまして申し訳ありませんでした。 また投稿することもあるとは思いますが、その折に宜しければまたご教授下さいませ。 重ねて、ありがとうございました。