人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: tomoki
●カテゴリ:ウェブ制作
✍キーワード:HTML エラー ジャバスクリプト タグ ファイル
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● y-kawaz
●20ポイント
document.getElementById("link00").onmouseover = changeBtn;

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

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

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

◎質問者からの返答

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


2 ● pahoo
●20ポイント ベストアンサー

もしイメージを使ったボタンを意図しているのだとしたら、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>
◎質問者からの返答

ありがとうございます。

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

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

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" ;

}

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

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


3 ● y-kawaz
●20ポイント
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イベントの設定は全てのオブジェクトに対して行えば、関数を沢山作らなくても良くなります。

◎質問者からの返答

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

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


4 ● atmarkbienna
●20ポイント

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

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

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

でいけると思います

◎質問者からの返答

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

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

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

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

function changeBtn(){

ボタンを変更する命令

}

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

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


5 ● pahoo
●20ポイント

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>
◎質問者からの返答

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

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

チャレンジしてみます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ