JavaScript を使用して画像の `src` 属性を動的に更新するにはどうすればよいですか?

JavaScript を使用した画像ソースの動的更新

JavaScript は、img タグの src 属性を変更し、動的な画像を有効にするためのシンプルかつ効果的な方法を提供します操作。次の HTML 構造について考えてみましょう:

<code class="html"><img src="../template/edit.png" name="edit-save" alt="Edit" /></code>

最初、画像には「../template/edit.png」が表示されます。ただし、クリック時に「../template/save.png」に切り替えたいとします。これを実現するには、以下に示すように、img タグに id 属性を追加します。

<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>

edit() 関数で、次のコード スニペットを使用して画像ソースを簡単に更新できるようになりました。

<code class="javascript">var edit_save = document.getElementById("edit-save");
edit_save.src = "../template/save.png";</code>

この方法では、過剰なクリックを必要とせずにシームレスな画像の交換が可能です。

以上がJavaScript を使用して画像の `src` 属性を動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。