html - クリックで画像を変更し、クリックで元に戻る方法

Question

私はJavascriptアプリを構築しています

今、私はすでに与えた画像ボタンが欲しいので、現在の画像をクリックすると画像を別の画像に変更したいと思います。

もう一度クリックすると、古い画像に戻りたいので、コーディング例を教えてください..

Answer 1

これを試して：

function diffImage(img) 
{
   if(img.src.match(/blank/)) img.src = "black.jpg";
   else img.src = "blank.jpg";
}

HTML

<img src="black.jpg" id="image1" onclick=diffImage(this) />

要件に従って画像パスを変更してみてください。または、複数の画像を追加することもできます。

デモ。

この仕事を願っています。

Answer 2

必要に応じて、CSS のみを使用してそれを行うこともできます。

チェックボックスを作成して、イベントをトリガーせずにクリックしてそこに画像を配置し、クリックされたときに別の画像を表示できるようにします。

<input type="checkbox"/>

そしてあなたのCSS：

input[type="checkbox"] {
    content: url(image url here);
}
input[type="checkbox"]:checked {
    content: url(different image here);
}

このトリックをどこで学んだか覚えていませんが、以前はうまくいきました。