onclickで自分自身の画像を変更する

質問

メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。

メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。
onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。

過去トピックで確認したのですが、回答のリンクが切れてしまっていて、確認できませんでした。

１日以上試行錯誤していますが、どうにもうまくいきません。

どなたかご教示いただけないでしょうか？　よろしくお願いします。

IE,Firefox対応希望。

下記コードが現在のところです。
<li><a href="http://www.yahoo.com/" onmouseover="document.spp.src='images/a_rollover.gif'" onclick="document.spp.src='images/a_press.gif'" onmouseout="document.spp.src='images/a_on.gif'">
<img src="images/a_on.gif" name="spp"></a></li>

回答No.1

fujillin · ベストアンサー

＞どうにもうまくいきません。
どううまくいかないのか書いてないのでわかりませんが…
想像するところ、クリックで画像が変わってもその後にマウスアウトやマウスオーバーのイベントが発生すると画像が変わってしまうとかでしょうか？
もしそうであるなら、ロールオーバーのアクションをクリック後は止めてあげればよろしいかと。

例えば、クリックのフラグを作っておいてそれによってロールオーバーするかしないか判定するとか、あるいは、クリックされたらロールオーバーの設定を外してしまうとか。
まったく違う発想で、画像はクリック後のものにしておいて（最初は非表示）、ロールオーバーはa要素の背景画像を用いてcssで行うとか。
これなら、クリックで画像を表示後にロールオーバーが起こっても、背景なので画像で隠されて見えなくなります。

a要素内が画像だけなら、画像にイベントを設定してしまったほうが、thisが使えるので記述が簡単になるかも…
ご参考まで　

<a href="http://www.yahoo.com/">
<img src="images/a_on.gif"
onmouseover="this.src='images/a_rollover.gif';"
onmouseout="this.src='images/a_on.gif';"
onclick="this.src='images/a_press.gif';
this.onmouseover=null;
this.onmouseout=null;">
</a>

でも、タグ内にスクリプトをいろいろと書く記法だと見にくくないですか？
もし、ほかにも同様のものがある場合は個々のタグ内に記さないで、sucripタグか外部スクリプトのfunctionなどにまとめてしまうことをお勧めします。

お礼

fujillinさん、既にご回答いただいたコードの中にロールオーバーの
設定を外すよう書いていただいていたんですね。
コードを書き直し、実行してみたところうまくいきました^^

一人で考えていたら全く思いつかないことでした。
悩んでいたのが、うそのようです。本当にありがとうございました。

補足

どううまくいかないのか書いてないのでわかりませんが…
　>言葉足らずで申し訳ありません。クリックしてもクリック時の画像が表示されず
　マウスオーバーの画像のままのように見えます。

fujillinさんのおっしゃっている、クリック後にマウスオーバーの
イベントが発生しているのかもしれません。。。
　>クリックのフラグを作っておいてそれによってロールオーバーするかしないか判定するとか、あるい　は、クリックされたらロールオーバーの設定を外してしまうとか

大変申し訳ないのですが、上記のコードの書き方後教示いただけないでしょうか？
お忙しいところ申し訳ありません。