Question

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

我也试过设置值=“”但没有用。有什么帮助吗？

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>
/>

Answer 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网址更改为您的完整网址。

您会发现更多Here

Answer 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=""

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

2 个答案: