リンク先が同じページになってしまう

[新着] Webテンプレートを仮オープンしました



0   名前: じーく : 2007/07/17(火) 13:16  ID:ilTxLPb9 sub-Q5
皆様初めまして。じーくと申します。宜しくお願い致します。

リンクをクリックすると音が出るようにしたく、Javascriptを探していたところ
見つけられたので、そのスクリプトを使用して音が鳴るようにすることが出来ました。
ところがそのリンクをクリックすると全て同じページに飛んでしまう状態になってしまっています。
何故全て同じページに飛ぶのかが分かりません。
以下サンプルを提示しますので、どなたかその原因をご教示頂けませんでしょうか。
宜しくお願い致します。
以下サンプルです。

<SCRIPT TYPE="text/javascript">
<!--
wavs = new Array('c2.wav');
Hrefs = new Array("1.html","2.html","3.html","mailto:xxx@xxxx.com");
function sound_on(n){
t = n;
document.getElementById('sound').src = wavs[t];
setTimeout('JumpToNextPage(t)',1500);
}
function JumpToNextPage(n){
location.href = Hrefs[n];
}
// -->
</SCRIPT>
</head>
<bgsound id="sound">
<td><a href="#" onClick="sound_on(0);"><img src="img/1.gif" ></a></td>
<td><a href="#" onClick="sound_on(0);"><img src="img/2.gif" border="0"></a></td>
<td><a href="#" onClick="sound_on(0);"><img src="img/3.gif" border="0"></a></td>
            <a href="#" onClick="sound_on(0);"><img src="img/mail.gif" border="0">


1.gifのファイルが1.htmlへのリンク、2.gifが2.htmlへのリンク、3.gifが3.htmlへのリンク、mail.gifがmailtoのアイコンと
なっています。

1   名前: じーく : 2007/07/17(火) 13:16  ID:zvoGLQcB sub-Cl
書き忘れていましたが、どのリンクをクリックしても全て1.htmlに飛んでしまいます。

2   名前: 元帥 : 2007/07/17(火) 13:16  [URL]  ID:xeK5iDrL sub-bK
以下、罫線まで原因のみについての記述です。

いずれも、
<a href="#" onClick="sound_on(0);">
引数に0が指定されているからです。

従って、
location.href = Hrefs[n]; //Hrefs[0]="1.html"
nの値はいずれの場合も0となり、Hrefs配列の0番目がリンク先となります。


以下は無視して下さって構いませんが、より良いページ作りを目指したいとお考えなら一読して下さい。


サンプルをコピペして自分のPCで問題なければOKって安心してはいけません。
抜粋なのかどうか分かりませんが、>>0はbody開始タグが見当たらなかったりと、ちょっと気になります。

HTML文法チェック:
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

またスクリプトOFFではリンク先を辿れなくなってしまいます。
リンクの際に音楽を鳴らしたいがために、このようなコードになったら本末転倒なので、もう一工夫必要です。

HP作成の意識調査 音楽の使用について:
http://www.tagindex.com/cgi-lib/statistics/vote.cgi

3   名前: じーく : 2007/07/17(火) 13:16  ID:ilTxLPb9 sub-Q5
元帥様

ご教示有難うございました。Javascriptで追記した部分のみをサンプルとして提示しました。
このサンプルだと音源(c2.wavはクリック音です)を複数用意しなければいけないという事ですね。
また、ご指摘頂いたとおりJavascriptをOFFにしているブラウザの場合リンク先へ飛べない形になって
しまいますね。Javascriptは全く分からず、色々検索してこのサンプルを発見したのですが、
いい解決方法が無いかもう少し探してみます。
また、リンクを貼って頂いたページも参考にしたいと思います。
有難うございました。

4   名前: 匿名 : 2007/07/17(火) 13:16  ID:PISglGMa sub-Cl
>このサンプルだと音源(c2.wavはクリック音です)を複数用意しなければいけないという事ですね。

wavs = new Array("c2.wav","c2.wav","c2.wav","c2.wav");

ファイルを複数用意しなくともこうすれば良いのでは?

5   名前: 元帥 : 2007/07/17(火) 13:16  [URL]  ID:qn9W7jMi sub-bK
ちょいとヒントです。

href属性にはリンク先を記述する方が何かと無難です。
スクリプトからこの値を取得させます。
<a href="1.html" onClick="return sound_on(this.href,0);">

リンク先URLはmにでも格納。
function sound_on(m,n){
Hrefs配列は使用しません。
setTimeoutの引数と、JumpToNextPage関数もちょっと変更が必要です。

尚、falseを返してやらないと、音楽が再生されないうちにページ遷移されちゃいます。
function sound_on(m,n){
〜略〜
return false;}

JavaScriptの入門として下記サイトを紹介しておきます。
とほほのJavaScriptリファレンス:
http://www.tohoho-web.com/js/index.htm

6   名前: じーく : 2007/07/17(火) 13:16  ID:ilTxLPb9 sub-Q5
匿名様
元帥様

ヒント有難うございました!
早速見直してもう少しテストしてみたいと思います。
何度もご指摘頂き有難うございます。
リンク先のページも見て参考にさせて頂きたいと思います。

重ねて御礼申し上げます。

一覧へ戻る