JavaScript OnMouseDown Image Hover Effect Help

So here's the thing I made a stopwatch (that you can view here).

However when you try it out you'll see there's some problems, and what I'm trying to achieve is...

When I hover over the start button, it's rollover开发者_运维百科 shows, but when I click down the stop button appears, and when the mouse button is up the stop buttons rollover/hover image appears.

In which it does what I want it to there, but when you hover off the stopwatch when the time is going the start button appears when I want the stop button to remain.

Additionally, when the time is going, and the cursor is still on the stop button, once it's pressed again instead of showing the start button, like I want it still shows the stop button.

Now I know I haft to use the If, and Else If statements with this however I'm unaware on how to get this to work. (I've spent almost 3 hours trying to find the answer, and just having a inner blonde moment today all day)

Can anybody help???

Try this :

    <script language="javascript">
        var started = false; 
    </script>
    <div class="start">
        <A HREF="#" onclick="started = !started;findTIME();"
        onMouseOver = "if(started){document.images['imBut'].src='images/stophover';}else{document.images['imBut'].src='images/starthover.png';}"
        onMouseOut = "if(started){document.images['imBut'].src='images/stop.png';}else{document.images['imBut'].src='images/start.png';}"
        onMouseDown = "document.images['imBut'].src='images/stop.png';"
        onMouseUp = "document.images['imBut'].src='images/stophover.png';"
        <IMG NAME="imBut" SRC="images/start.png" WIDTH="65" HEIGHT="32" BORDER="0"></A>
    </div>