使图像像按钮一样

Posted 2023-02-22

【中文标题】使图像像按钮一样

【英文标题】：Making an image act like a button

【发布时间】：2013-04-14 11:05:47

【问题描述】：

我正在处理一个简单的 html 页面，其中有一张我想用作按钮的图片。

这是我的图片的代码：

<div style="position: absolute; left: 10px; top: 40px;"> 
    <img src="logg.png"  >
</div>

基本上我想在其中添加这个功能：

<div>
    <input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"/>
</div>

不需要按钮本身上的“提交”文本，因为我的图像有它需要的文本。

无论如何，这可能吗？如果是这样，如何？ :)

【参考方案1】：

听起来你想要一个image 按钮：

<input type="image" src="logg.png" name="saveForm" class="btTxt submit" id="saveForm" />

或者，您可以使用 CSS 使现有的 submit 按钮使用您的图像作为其背景。

无论如何，您不希望页面上有一个单独的<img /> 元素。

【讨论】：

为什么页面上的<button>内不能有<img>元素？

<button> 和 <input> 元素不能包含任何类型的其他元素。

<button type = "button"> <img src = ""> </button>

【参考方案2】：

您可以实现一个包含您需要的函数的 javascript 块。

<div style="position: absolute; left: 10px; top: 40px;"> 
    <img src="logg.png"   onclick="DoSomething();" />
</div>

【讨论】：

不是表单的最佳选择。

我认为这将违反可访问性，因为默认情况下，图像不可聚焦/可使用键盘点击。

【参考方案3】：

你可以使用image submit button:

<input type="image"  id="saveform" src="logg.png "  />