使用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/imghw/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中文网其他相关文章！