使用JavaScript模擬類似Windows的按鈕

>使用HTML和JavaScript創建自定義圖形按鈕非常簡單！本教程演示瞭如何使用圖像交換來構建具有三個不同狀態（向上，下，向下）的按鈕。

我們將使用三個圖像：

（默認），ButtonSubmit.gif（鼠標覆蓋）和ButtonSubmit-over.gif>（鼠標單擊）。 ButtonSubmit-down.gif

這是代碼：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onmouseover="ReplaceImage('ImgSubmit', 'ButtonSubmit-over.gif')" onmousedown="ReplaceImage('ImgSubmit', 'ButtonSubmit-down.gif')" onmouseout="ReplaceImage('ImgSubmit', 'ButtonSubmit.gif')">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136519147164.gif" class="lazy" alt="Simulate a Windows-like Button Using JavaScript ">
</a>

>

javaScript函數以參數為圖像的名稱和新文件路徑，動態更新圖像源。 ReplaceImage()tag的事件處理程序（<a></a>，onmouseover，onmousedown）根據用戶交互觸發圖像交換。 圖像本身嵌套在標籤中。 請注意，添加了onmouseout屬性以供可訪問性。 <a></a> alt

>說明：

• ：>此功能更新了ReplaceImage(sImgName, sImgFile)> 標識的圖像元素的src屬性，並使用新的image pathsImgName。 sImgFile

• ：這會創建一個超鏈接； 防止導航到新頁面。 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a> href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"

• ，

  ，：onmouseover>這些事件屬性調用onmousedown以基於鼠標狀態更改圖像（懸停，單擊，離開）。 onmouseout> ReplaceImage()

• ：

  這顯示了圖像，並允許javaScript引用它。 <img ... alt="使用JavaScript模擬類似Windows的按鈕" > name="ImgSubmit"這種方法創建一個具有動態圖像更改的視覺吸引力按鈕，模仿了許多應用程序中按鈕的外觀和感覺。請記住，將

  和
替換為圖像文件的實際路徑。 為了獲得最佳效果，請使用一致尺寸的圖像來防止佈局變化。

以上是使用JavaScript模擬類似Windows的按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！