[解決済み] Javascriptのシンプルなオンクリック画像スワップ

質問

Javascriptを使って画像を入れ替えようとしているのですが、今のところAからBに移動させることはできても、元に戻すことはできません。

以下は、1つのスワップを作成するために使用しているものです。

<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>

これで画像1と画像2が入れ替わり、シンプルになりました。しかし、新しい画像2をクリックすることで画像1に戻せるようにしたいのです。こんな感じでやってみました。

<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>

この例ではうまくいかないようです。pic2に切り替わりますが、pic1には戻りません。onclickと何か関係があるのでしょうか？私のifステートメント？ありがとうございます。

解決方法を教えてください。

あなたのコードでは、問題は window.document.pic.srcに警告を出すと、次のように表示されます。 http://localhost/pic1.png で、if (window.document.pic.src == 'pic1.png') という条件を使っていますね。 どのように真になるのでしょうか。 これを試してみてください。

<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>