自分のホームページでMIDIのコンテンツを作ろうと思ってます。
 で、曲名の後ろの「試聴」のボタン(画像)を押したら、小窓が出てその曲名のMIDIがなるようにしたいのです。
 Aの曲の試聴ボタンを押せば、小窓はAのMIDIが鳴り、Bの曲の試聴ボタンを押せばBのMIDIが鳴るという感じです。(小窓は複数出さないです)
 こういうjavascriptは、さがしたらいくつかあったのですが、ここからが問題。私が今までみたものはすべて、小窓は別のHTMLファイルを用意しています。Aの試聴ボタンを押したら、Aのmidiを鳴らすためのHTMLファイルへリンクしてるのですよ。もし、10曲試聴してもらおうとしたら、10個のHTMLファイルを用意しなくてはいけないわけです。
 私が、欲しいなぁ・・・と思ってるのは、別HTMLファイルを用意せずに、変数か何かを使って、Aの試聴ボタンを押したら小窓の題名とMIDIがA用に入れ替わって、Bの試聴ボタンを押したら小窓の題名とMIDIが入れ替わる・・・みたいなのなのですが。(この説明で分かるかなぁ・・・) コンボボックスならそういうのがあるのは見つけたのですが、画像のクリックでやりたい!と思ってます。いろいろなサイトをまわりましたが、見つかりません。自作しようとも思いましたがまだまだ勉強中の身で、できませんでした。
 このようなjavascriptの作り方を知ってる、又は作り方の出ているサイトを知ってる方いましたら、教えていただけますか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

>

http://www.oitaweb.ne.jp/hp/tatsuya/java/bgm3.htm
> で、コンボボックスではなくて、ボタンで・・・と考えていました。

なるほど、ウィンドウを開く方から document.write() する、って手もある
んですね。

ってことは、ラジオボタン(で良い?)から myGo() を呼び出せば良いだけね。
それなら、もっと簡単。

まずは、<form> のところを以下のような感じに。

<form name="myForm">
☆☆ お好きな曲を選んでください ☆☆ <br>
<input type=radio name=myMenu value=0 onClick="myGo(this)">日曜画家<br>
<input type=radio name=myMenu value=1 onClick="myGo(this)">渚のヒロイン
</form>

それから、関数 myGo() の先頭あたりを以下のような感じに。

function myGo(btn){
mySelect = btn.value;

myWin = window.open("" , "bgmwin","width=210,height=160"); // ここは、変わってません


いかが?
    • good
    • 0
この回答へのお礼

 できました!!
 1ヶ月近く、悶々と考えていたことが解決できて、すっきりしました。
 本当にありがとうございます。とても嬉しいです。

 余談ですが・・a-kumaさんて、ものすごく回答されてますねぇ・・履歴見せていただいて、感心しちゃいました。

お礼日時:2001/12/14 22:06

CGI を起動するときに get で渡すパラメータって、実は HTML でも指定でき、


Javascript で利用することができます。

それを利用して、曲名と URL を渡す例を、簡単に作ってみました。

この例では、小窓で <a> タグで表示していますが、パラメータさえ渡せれば
MIDI を鳴らすことはできるのですよね?

■曲名一覧が有る html

<html>
<body>

<script type="text/JavaScript">
function open_win(title, url) {
// 題名は漢字が入るかもしれないから escape しておく
u = "sound.htm" + "?title=" + escape(title) + "&url=" + url;
window.open(u, "a", "height=100,width=100");
}
</script>

<form name="X">
<input type=button value=" 曲A " onClick="open_win('曲A', 'a.htm')">
<input type=button value=" 曲B " onClick="open_win('曲B', 'b.htm')">
</form>

</body>
</html>

■渡されたパラメータを使う html (sound.htm)

<html>
<script type="text/JavaScript">
// パラメータをばらして、title と url の内容を設定する
var title;
var url;

p = location.search; // これがパラメータ(?以降)を表す
v = p.substring(1).split("&"); // 一文字目の?の後を、&で分割する

t = v[0].split("="); // ひとつめは title=??? のはず
title = unescape(t[1]); // 題名は漢字が入るかもしれない…

t = v[1].split("="); // ふたつめは url=??? のはず
url = t[1];
</script>

<head>
<script type="text/JavaScript">
document.write("<title>" + title + "</title>");
</script>
</head>

<body>
<script type="text/JavaScript">
document.write("<a href=\"" + url + "\">");
document.write(title);
</script>
</a>
</body>
</html>

エラーチェックなんかもばっさり削ってますが、参考になりますか?

この回答への補足

 お早い回答ありがとうございます。
 わざわざ作っていただいて、嬉しいです。
 しかし、悲しいことにJavascript幼稚園児の私には、a-kumaさんの回答が漠然としか分かっておりません(;_;)なんとなぁく、分かるという感じでしょうか。
 私が考えていたのは
http://www.oitaweb.ne.jp/hp/tatsuya/java/bgm3.htm
で、コンボボックスではなくて、ボタンで・・・と考えていました。
 もう少し、じっくり見せていただいて、勉強します。

補足日時:2001/12/13 16:16
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aと関連する良く見られている質問

QHTMLのボタンを二度押させない

HTMLであるボタンが押されたら、そのボタンを押させないようにするにはどうすればいいでしょうか。
今、WEBサイトを構築中なのですが、登録ボタンを連打されると複数データができてしまい、困ってます。
簡単な方法があれば教えてください。
よろしくお願いします。

Aベストアンサー

簡単な方法ではJavaScriptを使ってボタンのonClickイベントでボタンのdisabledをtrueにして押させないようにするのがいいです。
ただ、これでも確実な方法ではないので。

Q外部に用意したHTMLファイルを他のHTMLのページに読み込みたいので

外部に用意したHTMLファイルを他のHTMLのページに読み込みたいのですが…
いろいろ調べてみたんですが、prototype.jsで読み込む方法を見つけました。
URL http://sevenstyleweb.com/blog/2008/05/prototypejshtml.html
ただこの場合、読み込む元のhtmlファイルに<head>タグや<body>などが含まれている場合はそれも全て読み込む先に反映されてしまうのでしょうか?
読み込む元のファイルの任意の部分だけ(ID指定した<div>のみなど)を指定する事はできないのでしょうか?その方法があれば教えて下さい。
またprototype.jsでなくても、他のAjaxやjavascriptの方法があれば教えて下さい。お願いします。

Aベストアンサー

JAVASCRIPTライブラリーの使用も考えてられルナら、
jQueryのajazx.load()機能を使えば、かなり便利です。
jQuery1.2以降で、
.load( url, data, callback ) を使い
$("#hoge").load("/xxx.html #top-news div[class=inner]");
の様ににurl部分にスペースで区切ってjQueryセレクター記述で
欲しい部分のみを取得できます。
(※この機能なぜか、jQuery1.4のリファレンスからは消えてるんですよ。)

参考URL:http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

Qボタンを押したらラジオボタンを選択したい(サンプルソース付)

ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。
なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか?

※document.forms[0].R1[0].checked = true;
のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。

すみませんが、よろしくお願いします。

--
<html>

<head>
<SCRIPT language="JavaScript"><!--
function check() {
document.forms[0].C1.checked = true;
document.forms[0].S1.value = "3";
document.forms[0].R1.value = "a";
}
//--></SCRIPT>
<title></title>
</head>

<body>

<form>
<input type="checkbox" value="yes" name="C1"><br>
<select name="S1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br>
<input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br>
<input type="button" onclick="javascript:check()">
</form>
<br>

</body>

</html>

ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。
なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか?

※document.forms[0].R1[0].checked = true;
のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。

すみませんが、よろしくお願いします。

--
<html>

<head>
<...続きを読む

Aベストアンサー

ラジオボタンのvalueを参照して、該当のボタンにチェックを入れたいのであれば、もうほんの少しだけ複雑なスクリプトを組む必要があると思います。
スクリプトを以下のようにしてみてはいかがでしょうか。

<SCRIPT language="JavaScript"><!--
function check() {
document.forms[0].C1.checked = true;
document.forms[0].S1.value = "3";
for (i=0; i<document.forms[0].R1.length; i++){
if (document.forms[0].R1[i].value=="a"){
document.forms[0].R1[i].checked = true;}
}
}
//--></SCRIPT>

上記のラジオボタンのチェック部分では、for文でラジオボタンの項目数だけループし、それぞれのラジオボタンのもっているvalue値を参照してそれが"a"と一致している場合にはそのラジオボタンをチェックするようにしています。

これで対処できるのではないでしょうか。
参考になれば幸いです。

ラジオボタンのvalueを参照して、該当のボタンにチェックを入れたいのであれば、もうほんの少しだけ複雑なスクリプトを組む必要があると思います。
スクリプトを以下のようにしてみてはいかがでしょうか。

<SCRIPT language="JavaScript"><!--
function check() {
document.forms[0].C1.checked = true;
document.forms[0].S1.value = "3";
for (i=0; i<document.forms[0].R1.length; i++){
if (document.forms[0].R1[i].value=="a"){
document.forms[0].R1[i].checked = true;}
}
}
//--><...続きを読む

Q親窓と小窓を連携させたい

HPのトップページで小窓を一枚開きます。

HP内を閲覧している際はその小窓を表示しっぱなしにしますが、自分のHPから出た時に(親ページのウインドウを閉じる時や、他のサイトに移動した場合に)その小窓を消す方法はありますか?

ページを移動した時に消す方法はunloadで出来るようですが、サイト全体かどうかの判別はどうしたらよいでしょうか。

Aベストアンサー

小窓側で、タイマーで定期的に親の状態を監視するという方法が、もっともシンプルでいいのではないかと思います。

Qjavascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。

モと表示された1個のボタンと穴と表示された2個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り2つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。
あと、できたらモを押して2つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです><
おねがいします!!!

全然違うかもしれませんが、つくってみたのものっけておきます

<html>
<head>
<title></title>
<script type="text/javascript">
var moFlg = true;

function func(){

if (moFlg) {
document.getElementById("btn01").innerHTML = "穴";
document.getElementById("btn02").innerHTML = "モ";
document.getElementById("btn03").innerHTML = "穴";

moFlg = !moFlg;
} else {
document.getElementById("btn01").innerHTML = "穴";
document.getElementById("btn02").innerHTML = "穴";
document.getElementById("btn03").innerHTML = "モ";
moFlg = !moFlg;
}

}
</script>
</head>
<body>
<button id="btn01" type="button" " onClick="func()">

</button>
<button id="btn02" type="button" " onClick="">

</button>
<button id="btn03" type="button" " onClick="">

</button>
</body>
</html>



ここまでです。
でもできたら<input type ~ button ~ onClick>とかがつかわれているとうれしいです。

モと表示された1個のボタンと穴と表示された2個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り2つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。
あと、できたらモを押して2つの穴のどちらかがモにかわるとき穴からモにかわるボタンは...続きを読む

Aベストアンサー

あまり制度高くないような感じですが作ってみました。

<html lang="ja">
<head>
<title></title>
<script type="text/javascript">
function func(t_bt){
var input = document.getElementsByTagName('input');
var button = new Array();
for(var i = 0; i < input.length; i++) {
if(input[i].type == 'button') {
button.push(input[i]);
}
}

if(t_bt.value == 'モ') {
var rand = Rand(button.length - 1);
var flg = 0;
for(var i = 0; i < button.length; i++) {
if(button[i].id == t_bt.id) {
t_bt.value = '穴';
} else {
button[i].value = flg == rand ? 'モ' : '穴';
flg++;
}
}
}
}

function Rand(n) {
return Math.floor(Math.random() * n);
}
</script>
</head>
<body>
<form>
<input type="button" id="btn01" value="モ" onclick="func(this);">
<input type="button" id="btn02" value="穴" onclick="func(this);">
<input type="button" id="btn03" value="穴" onclick="func(this);">
</form>
</body>
</html>

バグとかあったらすみません。
もっと効率のいい方法はないかな。

あまり制度高くないような感じですが作ってみました。

<html lang="ja">
<head>
<title></title>
<script type="text/javascript">
function func(t_bt){
var input = document.getElementsByTagName('input');
var button = new Array();
for(var i = 0; i < input.length; i++) {
if(input[i].type == 'button') {
button.push(input[i]);
}
}

if(t_bt.value == 'モ') {
var rand = Rand(button.length - 1);
var flg = 0;
for(var i = 0; i < button.length; i++) {
if(button[i].id == t...続きを読む


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

おすすめ情報