使用JavaScript 變更影像的來源URL
要使用JavaScript 動態更新影像標記的來源URL,請務必確保正確處理事件監聽器和元素識別。
解決方案:
在img 標籤上新增ID:
為img標籤分配一個唯一的ID 。這將幫助您在 JavaScript 程式碼中專門定位它。
<code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>
存取圖片元素:
使用 document.getElementById() 方法取得 img 元素的參考。
<code class="javascript">var editSave = document.getElementById("edit-save");</code>
變更 src 屬性:
一旦取得影像元素引用,就可以修改其 src屬性來更新影像來源。
<code class="javascript">editSave.src = "../template/save.png";</code>
範例:
在您提供的程式碼中,加上以下ID:
<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>
然後,修改您的JavaScript 函數:
<code class="javascript">function edit() { var editSave = document.getElementById("edit-save"); editSave.src = "../template/save.png"; }</code>
透過此方法,只需按一下影像即可正確更新影像來源。
以上是如何使用 JavaScript 動態更新圖片標籤的來源 URL?的詳細內容。更多資訊請關注PHP中文網其他相關文章!