JavaScript OnMouseDown 图像悬停效果帮助

Question

这就是我制作的秒表（您可以此处查看）。

但是，当您尝试时，您会发现存在一些问题，而我想要实现的是...

当我将鼠标悬停在开始按钮上时，它会显示翻转，但是当我单击时，会出现停止按钮，并且当鼠标按钮抬起，停止按钮翻转/悬停图像出现。

它会按照我想要的方式进行操作，但是当您将鼠标悬停在秒表上时，时间即将过去，当我希望保留停止按钮时，就会出现开始按钮。

此外，当时间过去，光标仍然在停止按钮上时，一旦再次按下它，而不是显示开始按钮，就像我希望它仍然显示停止按钮一样。

现在我知道我必须使用 If 和 Else If 语句来实现这一点，但是我不知道如何让它发挥作用。 （我花了近 3 个小时试图找到答案，今天一整天都在享受内心的金发时刻）

任何人都可以帮忙吗？

Answer 1

试试这个：

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