css - HTML - Broken Image on Roll-over Image -

<a href="http://pipleklo.tk/done.jpg"> <img src="http://pipleklo.tk/done.jpg" onmouseover="this.src='http://pipleklo.tk/me.png'" onmouseout="this.src='http://pipleklo.tk/done.png'"> </a> 

that sample code. when first load "about me" web-page shows broken image until click on it.

but when move mouse on fixes , stays fixed. broken image looks ugly , wondering why happening.

simple replace extension of file jpg png:

http://pipleklo.tk/done.png 

the above file exists on server not 1 jpg.