dポイントプレゼントキャンペーン実施中！

一定時間で画像とリンク先を変換する

解決済

  • 質問者：hbf79ghm16oh6
  • 質問日時：
  • 回答数：4件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

え～っと。



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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillin様
この度は本当にありがとうございました。
頂いた解決法で見事、意図していた展開ができるようになりました。
これで進行中のサイトが完成します。
当方の勉強不足で大変お手数をおかけしまして申し訳ありませんでした。
また投稿することもあるとは思いますが、その折に宜しければまたご教授下さいませ。
重ねて、ありがとうございました。

通報する
お礼日時：2011/09/13 14:56

No.3

  • 回答者： fujillin
  • 回答日時：

再度、#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様が推奨されるソースがあれば、ご提示頂ければ幸いです。
頼りきりになってしまい、本当に恐縮ですが、ご回答お待ち申し上げます。

補足日時：2011/09/12 21:56
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

#1です。



＞しかし、最初に "00000.jpg"をクリックして"00000.html"にジャンプすると
＞その後で"11111.jpg"をクリックしても"00000.html"しかジャンプできず
全貌がわからないので、ご質問の意味がよくわかりません。

最初に、00000.htmlにジャンプしたら画面が遷移するので、「その後で"11111.jpg"をクリックしても」というのがどういう状態を意味しているのでしょうか？
通常なら、00000.htmlの内容が表示されているはずと思いますが、そちらにも似たような画像があるということでしょうか？
かりにそうだとすれば、見た目は似ていても表示しているものが違うのでは？
同じように動作させたいのであれば、そちらにも同じような仕組みを持たせればよろしいかと。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

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>

補足日時：2011/09/09 21:33
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報