ジャバスクリプトを使ったボタンの変更について教えて下さい。

HTMLファイルには何も記入せず、ジャバスクリプトファイルだけで、ボタンの変更をしたいと考えいます。
ボタンに<a href="***.html" id="link00">というタグをつけて、
ジャバスクリプトファイルに
document.getElementById("link00").onmouseover = changeBtn() ;
function changeBtn(){
ボタンを変更する命令
}
とやっているのですが、エラーがでてうまく行きません。
なぜでしょうか?
ジャバスクリプトに詳しい方、どうかご指導ください。
よろしくお願いします。

回答の条件
  • 1人3回まで
  • 登録:2009/06/08 09:40:27
  • 終了:2009/06/15 09:45:03

ベストアンサー

id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/06/08 14:53:19

ポイント20pt

もしイメージを使ったボタンを意図しているのだとしたら、JavaScriptとHTMLはこんな感じではどうでしょう。

<script language="JavaScript">
window.onload = function() {
    document.getElementById("link00").onmouseover = changeBtn;
}
function changeBtn(){
    document.getElementById("btn00").src="http://www.hatena.ne.jp/users/pa/pahoo/profile.gif";
}
</script>

<a href="http://q.hatena.ne.jp/1244421626" id="link00">
<img id="btn00" src="http://www.hatena.ne.jp/users/kh/khd/profile.gif" />
</a>
id:khd

ありがとうございます。

イメージを使ったボタンで、変更することができました。

申し訳ありませんが、もう一度質問させてください。

changeBtn()には引数は使えないでしょうか?

各ボタンの変更をする場合は、以下のようなスクリプトをボタン1つ1つに書くのがベストでしょうか?

window.onload = function() {

document.getElementById("link00").onmouseover = changeBtn1;

document.getElementById("link00").onmouseout = changeBtn2;

}

function changeBtn1(){

document.getElementById("btn00").src="image/btn01-00-over.gif" ;

}

function changeBtn2(){

document.getElementById("btn00").src="image/btn01-00.gif" ;

}

ご指導いただければ、嬉しく思います。

よろしくお願いいたします。

2009/06/08 16:50:50

その他の回答(4件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252009/06/08 10:09:00

ポイント20pt
document.getElementById("link00").onmouseover = changeBtn;

document.getElementById("link00").onmouseover = function() {
  //ボタンを変更する命令
};

と書くべきじゃないでしょうか。

「~=changeBtn()」だとchangeBtn()を実行した結果(多分null)がonmouseoverにセットされることになります。

id:khd

ご回答いただき、ありがとうございました。

2009/06/08 16:46:21
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/06/08 14:53:19ここでベストアンサー

ポイント20pt

もしイメージを使ったボタンを意図しているのだとしたら、JavaScriptとHTMLはこんな感じではどうでしょう。

<script language="JavaScript">
window.onload = function() {
    document.getElementById("link00").onmouseover = changeBtn;
}
function changeBtn(){
    document.getElementById("btn00").src="http://www.hatena.ne.jp/users/pa/pahoo/profile.gif";
}
</script>

<a href="http://q.hatena.ne.jp/1244421626" id="link00">
<img id="btn00" src="http://www.hatena.ne.jp/users/kh/khd/profile.gif" />
</a>
id:khd

ありがとうございます。

イメージを使ったボタンで、変更することができました。

申し訳ありませんが、もう一度質問させてください。

changeBtn()には引数は使えないでしょうか?

各ボタンの変更をする場合は、以下のようなスクリプトをボタン1つ1つに書くのがベストでしょうか?

window.onload = function() {

document.getElementById("link00").onmouseover = changeBtn1;

document.getElementById("link00").onmouseout = changeBtn2;

}

function changeBtn1(){

document.getElementById("btn00").src="image/btn01-00-over.gif" ;

}

function changeBtn2(){

document.getElementById("btn00").src="image/btn01-00.gif" ;

}

ご指導いただければ、嬉しく思います。

よろしくお願いいたします。

2009/06/08 16:50:50
id:y-kawaz No.3

y-kawaz回答回数1420ベストアンサー獲得回数2252009/06/08 17:23:22

ポイント20pt
function changeBtn(e) {
	//イベント発生元エレメントの取得
	var target = e ? e.target : window.event.srcElement;
	//以下、targetに対して何か処理を行う
}

//複数の linkX エレメントにイベントを登録
for(var i = 0; i < 3; i++) {
	var link = document.getElementById('link'+i);
	if(link) {
		link.onmouseover = changeBtn;
	}
}

↑こんな感じに、IE以外では第一引数でイベントオブジェクトが取れるので、イベントのtargetプロパティでイベントの発生元が取得できます。IEの場合はwindow.event.srcElementからイベント発生元を取得します。

これで、mouseoverイベントの設定は全てのオブジェクトに対して行えば、関数を沢山作らなくても良くなります。

id:khd

ご指導いただき、ありがとうございます。

ちょっと難しそうですがチャレンジしてみます。

2009/06/09 09:24:27
id:atmarkbienna No.4

atmarkbienna回答回数61ベストアンサー獲得回数32009/06/08 18:03:55

ポイント20pt

document.getElementById("link00").onmouseover = changeBtn() ;

だとchangeBtnの戻り値がJavascriptコードとして実行される上、戻り値には当然クオーテーションが無いのでエラーとなります。

なので、onmouseoverでchangeBtn();が実行されるには、onmouseover=(function() {changeBtn();})();

でいけると思います

id:khd

ご指導いただき、ありがとうございます。

これができれば、簡単なスクリプトですむなと思い、

実行してみましたが、うまくいきませんでした。

document.getElementById("link00").onmouseover =(function() {changeBtn();})();

function changeBtn(){

ボタンを変更する命令

}

どこか、間違っていますでしょうか?

よろしくお願いいたします。

2009/06/09 09:29:33
id:pahoo No.5

pahoo回答回数5960ベストアンサー獲得回数6332009/06/08 18:06:44

ポイント20pt

changeBtn()には引数は使えないでしょうか?

うーん、使ったことはないです。

でも、changeBtnをボタンの数だけ用意する必要はありません。ボタンIDとイメージURLをグローバル変数に用意しておきます。下記のTableBtnとTableBtnです。


<script language="JavaScript">
//ボタンとイメージURL
var TableBtn  = new Object();
TableBtn["link00"]  = "btn00";
TableBtn["link01"]  = "btn01";
var TableLink = new Object();
TableLink["link00"] = "hoge01.gif";
TableLink["link01"] = "hoge02.gif";

window.onload = function() {
    document.getElementById("link00").onmouseover = changeBtn;
    document.getElementById("link01").onmouseover = changeBtn;
}
function changeBtn() {
    document.getElementById(TableBtn[this.id]).src = TableLink[this.id];
}
</script>

<a href="http://hogehoge01" id="link00">
<img id="btn00" src="hoge00.gif" />
</a>
<a href="http://hogehoge02" id="link01">
<img id="btn01" src="hoge00.gif" />
</a>
id:khd

ご指導いただき、ありがとうございます。

すっきりとスクリプトが書けそうです。

チャレンジしてみます。

2009/06/09 09:36:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません