一定時間で画像とリンク先を変換する
- DreamWeaverCS3を使用してHPを製作しており、リンクが設定された画像を一定時間ごとに変換し、リンク先のページをポップアップウィンドウで開こうとしています。
- 現在のコードではポップアップウィンドウは正常に開くことができますが、一定時間での画像の変換がうまくいっていません。
- これについてご教授いただけると幸いです。
- ベストアンサー
一定時間で画像とリンク先を変換する
DreamWeaverCS3でHPを製作しております、まだ初心者です。 リンクが設定してある画像を一定時間で変換していき、なおかつリンク先のページをポップアップウィンドウで開こうとしています。 下記コードでポップアップウィンドウは開くのですが一定時間での変換がうまくいきません。 どなたかご教授頂けませんでしょうか。 宜しくお願い致します。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間（1000=1秒） jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "00000.html"; img[0] = "00000.jpg"; jmp[1] = "11111.html"; img[1] = "11111.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>"); setInterval(function(){ //--> </SCRIPT>
- 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>
関連するQ&A
- ランダムバナーのリンク先をポップアップウィンドウで開きたい。
ランダムバナーのリンク先をポップアップウィンドウで開きたい。 当方javascript初心者なのですが、色々なサイトを参考にして上記の方法を模索しています。 以下に記載する内容で画像をランダムに表示するところまで出来たのですが、 画像をクリックすると通常通り、リンク先に飛ぶだけでポップアップウィンドウが開きません。 この記述の間違い点、問題点をご指摘、助言をいただきたく思います。 よろしくお願いたします。 以下js記述↓ <SCRIPT language="JavaScript"> <!-- jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://google.com/"; jmp[2] = "http://www.microsoft.com/"; img[0] = "banner1.jpg"; img[1] = "banner2.jpg"; img[2] = "banner3.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick='javascript:window.open('"+jmp[n]+"','','width=600'); return false;'>"); document.write("<img src='"+img[n]+"' border='0' width='100' height='100' />"); document.write("</a>"); //--> </SCRIPT>
- ベストアンサー
- JavaScript
- 1万個からランダムリンクさせるには？
1万個からランダムリンクさせたいのですが、 jmp〔０〕からjmp〔１００００〕まで作ってしまうと 異常にソースが長くなり、読み込みが長くなってしまいました。 軽量化して読み込みを早したいのですが、いい方法はないでしょうか？ 使用したソースです プログラム初心者ですので具体的に書いていただけるとうれしいです。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT> </BODY> </HTML>
- 締切済み
- JavaScript
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- 画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、img[2] の画像が表示された場合、jmp[2] ではなく ５つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- 外部ファイルにしたら文字化けしてしまいました
ＦＣ２ブログで下記【１】を <script type="text/javascript"> <!-- 【１】 // --> </script> で囲んで直接プラグインに書き込んだら 文字化けせずに表示されたのですが、 外部ファイルにして <script type="text/javascript" src="【１】のJSファイルのパス"></script> をプラグインに書き込んだら、 画像リンクはうまく表示されたのですが、 文字化けしてしまいました。 文字化けしない方法はないでしょうか？ 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- ベストアンサー
- JavaScript
- ランダム表示
某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横310Ｘ縦190と言う 表示画像サイズの指定の仕方が わかりません いろいろ 試したのですが 素人のため なかなか うまくいきません 下のスプリクトにどこにどのようなタグを入れていいのか教えてください 皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>
- ベストアンサー
- JavaScript
- サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？ ■記述１(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述２(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述３(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述４(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ |￣￣￣￣￣￣￣| | 拡大画像 | |＿＿＿＿＿＿＿| |￣||￣||￣||￣| |＿||＿||＿||＿|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたい
JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたいと思っているのですが、 2のバナーの時には別窓で開き1のバナーの時はセルフで開くような設定を施す場合は どの用に書けばいいでしょうか？ 一応いろいろと調べて下記までは書いてみたのですが。。。 うまく動きません。。。 どなたか助けていただけませんでしょうか？ よろしくお願いします。 <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); tgt = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "wwwwwww.com"; jmp[1] = "wwwwwww.com"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/01.jpg"; img[1] = "img/01r.jpg"; // ブランクの指定 tgt[0] = "_self"; tgt[1] = "_blank"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' target='"+tgt[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>
- ベストアンサー
- JavaScript
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- 画像をランダムに
JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか？
- ベストアンサー
- JavaScript
お礼
fujillin様 この度は本当にありがとうございました。 頂いた解決法で見事、意図していた展開ができるようになりました。 これで進行中のサイトが完成します。 当方の勉強不足で大変お手数をおかけしまして申し訳ありませんでした。 また投稿することもあるとは思いますが、その折に宜しければまたご教授下さいませ。 重ねて、ありがとうございました。