ボタンを押したタイミングで画像を入れ替えて、離したタイミングで別ページに飛ばしたい

質問

お世話になっております。

この度、制作しているものが
ボタンが三段階で分かれておりまして、

通常→hover→click
の三段階に分かれております。

試行錯誤の末、onclickで画像を入れ替えることには成功したのですが、
どうも、思っているのとタイミングが違います・・・。

<img id="myimg1" src="images/g_navi_1_off.gif" onClick="
document.getElementById('myimg1').src='images/g_navi_1_cl.gif';" onRelease="location.href='ダミーＵＲＬ'"/>

としているのですが、
クリックして、離した瞬間に画像が入れ替わってしまったり、
onReleaseが正常に動かず、画像が入れ替わりません・・・。

また、onReleaseの際に、画像を_offの状態に戻したいのですが、
自分の力ではここが限界です…。

どなたかお知恵をお貸しいただければと思います
よろしくお願い致します

回答No.1

fujillin · ベストアンサー

マウスのクリックその他を場合わけして取得したいのであれば、

　・onmousedown　：マウスボタンが押された時
　・onmouseup　：マウスボタンが離された時
　・onmouseover　：マウスカーソルがオブジェクトに乗った時
　・onmouseout　：マウスカーソルがオブジェクトから離れた時
　・onmousemove　：マウスカーソルが移動した時
などのイベントを利用するのがよろしいかと。

なお、タグ内にスクリプトを書くのであれば
onClick="document.getElementById('myimg1').src='images/g_navi_1_cl.gif';"
　　　　　↓
onClick="this.src='images/g_navi_1_cl.gif';"
などでもいけるはずです。

お礼

どうもありがとうございます。

質問を投げてから、自分であれこれ試していたらできたのですが、
教えていただいた情報も、大変勉強になりました。
this.src 確かにこっちの方が便利ですね。

参考にしていたscriptが、別の画像を入れ替えるものだったため、
あのような書き方になってしまいました・・。

勉強になりました。どうもありがとうございます。