首頁 > web前端 > js教程 > 如何在單擊時使用 JavaScript 動態更改圖像來源?

如何在單擊時使用 JavaScript 動態更改圖像來源?

Mary-Kate Olsen
發布: 2024-10-30 19:08:03
原創
654 人瀏覽過

How can I dynamically change an image source using JavaScript on click?

使用JavaScript 動態修改圖片來源

在Web 開發中,可能需要以程式設計方式變更圖片標籤(img 標籤)的來源屬性以顯示不同的圖片基於使用者互動或動態內容。為了實現這一點,JavaScript 提供了各種方法來操作 HTML 元素。

考慮以下場景:

<img src="../template/edit.png" name="edit-save" alt="如何在單擊時使用 JavaScript 動態更改圖像來源?"><br> 
登入後複製

最初,影像標籤顯示來源為「edit.png」的影像。目標是在單擊圖像時將此來源更改為“save.png”。為此,可以使用帶有onclick 事件處理程序的HTML a 標籤,如下所示:

<a href="#" onclick="edit()" img src="..%20/template/edit.png" id="edit-save" alt="如何在單擊時使用 JavaScript 動態更改圖像來源?"></a><br>
登入後複製

如何在單擊時使用 JavaScript 動態更改圖像來源?(然後可以在JavaScript 中實現函數來執行所所需的來源修改:

function edit()<br>{<pre class="brush:php;toolbar:false">var inputs = document.myform;
for(var i = 0; i <p>}<br></p>
登入後複製
> ;

透過為影像標籤指派一個id(在本例中為「edit-save」),JavaScript 程式碼可以存取和修改其src 屬性。顯示的圖像。分離為單獨的步驟,您可以避免這種不便,並確保圖像來源在第一次單擊時立即更改。

以上是如何在單擊時使用 JavaScript 動態更改圖像來源?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板