onClickで2回目のクリックでもとの画像に戻す

質問

いつもお世話になっております。
JavaScriptで質問があり、投稿させていただきます！

JavaScriptでサイドメニューを作成しています。
折りたたみにしていて、大メニューをクリックで小メニューを開くようにしています。
大メニューは画像で作成し、小メニューはテキストなのですが、
大メニューをクリックし、小メニューが開いたときに、大メニューの画像を変更。
大メニューをクリックし、小メニューを閉じたときに、大メニューの画像を元に戻す。
としたいのですが、うまくいきません・・・。

スクリプトとHTMLは以下です。
[[JavaScript]]
<script type="text/javascript"><!--
function oritatami(id){
obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null);
if(obj) obj.style.display=(obj.style.display=="none")?"block":"none";
}
//--></script>

[[HTML]]
<h2><a href="../sample/index.html" onclick="oritatami('o0');return false"><img src="image/fg.jpg" width="210" height="26" onclick="this.src='image/fg_on.jpg'" onlclick="this.src='image/fg.jpg'"/></a></h2>
<div id="o0" style="display:none">
<ul>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
<li><a href="URL">Bible Flight</a>
</ul>
</div>

これでは、1回目のクリックで大メニューの画像は変わるのですが、2回目のクリックでは何もわかりません・・・。

どなたか、ご存知の方、ご教授いただけないでしょうか！！
よろしくお願いします！

回答No.1

marutone · ベストアンサー

以下のようにソースを変更してみてください。

[HTML]
○変更前
<img src="image/fg.jpg" width="210" height="26" onclick="this.src='image/fg_on.jpg'" onlclick="this.src='image/fg.jpg'"/>

○変更後
<img id="img" src="image/fg.jpg" width="210" height="26">

[JavaScript]
○変更前
if(obj)obj.style.display=(obj.style.display=="none")?"block":"none";

○変更後
if(obj) {
imgobj=(document.all)?document.all('img'):((document.getElementById)?document.getElementById('img'):null);

if (obj.style.display=="none") {
obj.style.display="block";
imgobj.src = 'image/fg_on.jpg';
} else {
obj.style.display="none";
imgobj.src = 'image/fg.jpg';
}
}

あと三項演算子は可読性を著しく低下させるので、
できるだけ使用しないようにしましょう。

お礼

ご回答いただきありがとうございました！！
丁寧なご説明で、とってもわかりやすかったです！。
新たにidをつけて、指定をしてあげればよかったのですね。
初心者ですみません。

また、三項演算子についてもありがとうございます。
可読性を低下させる・・・とは知りませんでした！
今後使用しないようにしてみます！

ほんとうにありがとうございました！