html - How to make Image change to show it is being pressed? -

i working on project mobile bidding system. designing front end of , ran problem 2 buttons using. there 2 buttons: 1) raise bid; 2) bid. being said here code

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

that works fine. except ceo wanted buttons kind of wrap around each other. raise button triangle concave bottom round circle bid button fits touching concave bottom of triangle. (not sure if makes sense) golf ball sitting on tee upside down. css using make them touch:

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

anyway, need make these buttons change (like indented) when pressed. did this:

<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();"/> 

that worked fine on pc..... doesn't work on mobile device. device have access 3rd or 4th gen ipod touch. doesn't change because there no mouse... didn't think 1 through did i?

so googled around , found things might work. things changing input type image button don't line right. lose round bid image sitting inside concave part of triangle. thinking if added both events inside of onclick event work, tried this:

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

this didn't change image mobile. ideas? need take different approach or there different effects on mobile site?

answer:

this did: 1) added id="btnbid" 2) added ontouchstart event 3) added ontouchend event

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

then put in script tag:

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;   }  

this gave me desired effect!!!

you should try ontouch() instead of onclick