如何更改图像以显示正在按下？

Question

我正在为移动投标系统开展项目。我正在设计它的前端，并遇到了我正在使用的两个按钮的问题。有两个按钮：1）提高投标; 2）出价。 现在正在这里说的是我的代码

<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/> 
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/ 

这工作正常。除了首席执行官想让纽扣环绕对方。升起按钮是一个带有凹形底部的三角形，其中圆形的圆形按钮几乎贴合三角形的凹形底部。 （不知道这是否合理）几乎就像一个倒在发球台上的高尔夫球。这是我使用，使他们几乎触摸的CSS：

.btnbid{ 
width:250px; 
position:relative; 
top:-79px; 
} 

.btnraise{ 
width:230px; 
} 

无论如何，我需要让这些按钮改变（像他们缩进）按下按钮时，。所以我做到了这一点：

<input class="btnraise" type="image" src="bidraise-up.png" onmousedown="this.src='bidraise-down.png'" onmouseup="this.src='bidraise-up.png'" onclick="raiseBid();"/> 
<input class="btnbid" type="image" src="mobilebid-up.png" onmousedown="this.src='mobilebid-down.png'" onmouseup="this.src='mobilebid-up.png'" onclick="Bid();"/> 

在PC上工作得很好.....但它在移动设备上无法正常工作。我可以使用的设备是第三代或第四代iPod Touch。它没有改变，因为没有老鼠......我不认为那是我做的一件事？

所以我搜索了一下，发现了一些可能有用的东西。比如将输入类型从image更改为button，但之后它们没有正确排列。我失去了坐在三角形凹陷部分内的圆形投标图像。所以我想，如果我刚添加的onclick事件内这两个事件，然后它的工作，所以我尝试这样的：

<input class="btnbid" type="image" src="mobilebid-up.png" onclick="this.src='mobilebid-down.png'; Bid();this.src='mobilebid-up.png';"/> 

这并没有为移动改变形象。有任何想法吗？我是否需要采取不同的方法来解决这个问题，或者在移动网站上有什么不同的效果？

答：

这是我做过什么： 1）增加了ID = “btnbid” 2）新增ontouchstart事件 3）新增ontouchend事件

<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" ontouchstart="touchStart()" ontouchend="touchEnd()"/> 

然后我把这个在脚本标记中：

var btnbid = document.getElementById('btnbid'); 
btnbid.addEventListener('touchstart', toucchStart, false); 
btnbid.addEventListener('touchend', touchEnd, false); 

function touchStart(event) { 
document.getElementById("btnbid").src="mobilebid-down.png"; 
return false; 
} 
function touchEnd(event) { 
document.getElementById("btnbid").src="mobilebid-up.png"; 
return false; 
} 

这给了我想要的效果！

Answer 1

你应该尝试onTouch()代替onclick