“提交”文本显示在图像输入类型中答案

【问题标题】："submit" text is showing up in image input type“提交”文本显示在图像输入类型中
【发布时间】：2013-11-22 20:44:01
【问题描述】：

我正在尝试创建一个图像输入，当鼠标按下时将图像从gatherHerb.jpg（默认）更改为gatherHerb2.jpg。该代码实际上可以正常工作，但现在默认的 sarif“提交”显示在图像上。

我也尝试设置 value="" 无济于事。有什么帮助吗？

先是 CSS，然后是 HTML。即使在堆栈上，格式化对我来说显然也是一个问题:(

#herbButton {
   border-radius: 5px;
   width: 100px;
   height:30px;
   background-image: url(buttons/gatherHerb.jpg)} 


<input type="image" id="herbButton" onClick="herbClick();"
    onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'"<br>
    onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'"<br>
/>

【问题讨论】：

因为它是一个提交按钮，如果您不提供值，它将自动保留文本“提交”。所以很自然，您尝试将值设置为空字符串 - 问题是，这也被解释为没有值。该怎么办？很简单，只需将值设置为单个空格即可。即value = ' '

标签： html image button input

【解决方案1】：

不要使用图像作为输入类型图像的背景

像这样在代码中使用输入类型图像的 src 属性

#herbButton {
   border-radius: 5px;
   width: 100px;
   height:30px;} 


<input type="image" src="buttons/gatherHerb.jpg" id="herbButton" onClick="herbClick();" onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'" onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'" />

将 src url 更改为您的完整 url。

你会发现更多Here

【讨论】：

也试过了。当我在中使用 src 时，它似乎胜过 mouseEvents。基本上，图像 1 总是出现。一位用户建议将 value=" " 与空格一起使用，这似乎奏效了。还是谢谢！

【解决方案2】：

我想这会对你有所帮助，

<input value=" " type="image" id="herbButton" onClick="herbClick();" onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'" onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'" />

查看更新：value=" " 之间应该有一个空格，

所以使用value=" " 而不是value=""

【讨论】：