document.getElementById & hidden image problem

[wigginsda]

Greenhorned Newbie here. Thanks for your patience.

 

In a mobile environment I discovered my "button" image disappears. This happens right after the image is clicked and the new page is loading. Is this event bubbling? How would I account for it?

<a style="text-align: center; border-style: none;" href="http://" style="color: #000000" onmouseover="document.getElementById('pic1').src='b.png'; this.style.color='#0ebfe9'" onmouseout="document.getElementById('pic1').src='a.png'; this.style.color='#000000'"><img src="a.png" id="pic1"><br>Click-here</a>

I chose using the above over css and a:hover becuase of the brevity of code. It also seemed to be overall easier for me to line up images with their corresponding linking text.

 

Thanks for any suggestions,

David

[davej]

CSS would be a much better choice.

 

http://www.w3schools.com/css/css_image_sprites.asp