Javascript 如何更改鼠标按住时的图像，然后在释放时执行事件？

我有一个非常直截了当的问题

---

我正在学习网页设计，我想用图像制作按钮，其中图像在鼠标悬停时会改变外观（我已经猜出了这一部分），然后当点击时，它们的外观会在点击持续的时间内发生变化，释放后，会执行所需的事件，比如移动到另一个页面

我已经讲了两个小时了，不知道你能不能帮我

以下是我的代码片段：

<script>

function changeImage()
{
element = document.getElementById('homeImage');
if (element.src.match("Home2"))
  {
    element.src = "Home.png";
  }
else
  {
    element.src = "Home2.png";
  }
}
function Execute()
{
element = document.getElementById('homeImage');
element.src = "Home3.png";
}
</script>

函数changeImage（）
{
元素=document.getElementById（'homeImage'）；
if（element.src.match（“Home2”））
{
element.src=“Home.png”；
}
其他的
{
element.src=“Home2.png”；
}
}
函数Execute（）
{
元素=document.getElementById（'homeImage'）；
element.src=“Home3.png”；
}

使用

onmouseup

和

onmouseudown

事件：

element.onmouseup=function(){ //this will be executed whenever the click is released..
SomeJavaScriptCode};

element.onmousedown=function(){ //This will be executed on click..
SomeJavaScriptCode};

---

使用

onmouseup

和

onmouseudown

事件：

element.onmouseup=function(){ //this will be executed whenever the click is released..
SomeJavaScriptCode};

element.onmousedown=function(){ //This will be executed on click..
SomeJavaScriptCode};

---

您可以使用jQuery中的.mousedown*和.mouseup，以便在鼠标单击元素时更改图像，并在释放鼠标时再次更改图像。

您可以使用jQuery中的.mousedown*和.mouseup，以便在鼠标单击元素时更改图像，并在释放鼠标时再次更改图像。

使用

mousedown

和

mouseup

事件

element.addEventListener("mousedown", function() {
    // Do stuff when the mouse is held down on `element`
});
element.addEventListener("mouseup", function() {
    // Do stuff when the mouse is released.
});

---

请随意。

使用

mousedown

和

mouseup

事件

element.addEventListener("mousedown", function() {
    // Do stuff when the mouse is held down on `element`
});
element.addEventListener("mouseup", function() {
    // Do stuff when the mouse is released.
});

---

---

请随意。

鼠标事件可能是您的最佳选择，如下面Carlos和Shoaib所示。@SandyBites请标记答案，如果这有助于您帮助他人。鼠标事件可能是您的最佳选择，如下面Carlos和Shoaib所示。@SandyBites请标记答案，如果这有助于您帮助他人。嗨，@Eric。虽然时间计算是一个很好的加法，但我看不出问题在哪里。“我错过了什么吗？”然后单击会在单击的持续时间内改变它们的外观，“我认为这意味着只要图像被“单击”（即，按住鼠标），外观就会保持改变。也许我误解了。我所理解的是变化与鼠标按下的时间有关，也许OP可以澄清？NP Chris，我没怀疑你哈哈，你听起来像个不错的花花公子嗨，@Eric。虽然时间计算是一个很好的加法，但我看不出问题在哪里。“我错过了什么吗？”然后单击会在单击的持续时间内改变它们的外观，“我认为这意味着只要图像被“单击”（即，按住鼠标），外观就会保持改变。也许我误解了。我理解的是变化是相对于鼠标按下的时间，也许OP可以澄清？NP克里斯，我没怀疑你哈哈，你听起来像个好人dude@SandyBites显然，他/她是从非常简单的代码开始的，他/她只是开始参与Web开发和JavaScript编程。将jQuery引入到场景中似乎有额外的复杂性。@Chris为什么要这样做？如果某人正在学习一些东西，那么他/她应该被告知所有可能的方向，至少卡洛斯没有误导他@这不是比赛。我只是在发表意见和评论。说“至少卡洛斯没有误导他/她”对任何人都没有帮助。如果卡洛斯误导了我，我会干脆否决卡洛斯的答案。如果这不是一个答案，我会打上标记的。这就是协作社区的工作方式。@SandyBites显然是从非常简单的代码开始的，他/她只是开始参与Web开发和JavaScript编程。将jQuery引入到场景中似乎有额外的复杂性。@Chris为什么要这样做？如果某人正在学习一些东西，那么他/她应该被告知所有可能的方向，至少卡洛斯没有误导他@这不是比赛。我只是在发表意见和评论。说“至少卡洛斯没有误导他/她”对任何人都没有帮助。如果卡洛斯误导了我，我会干脆否决卡洛斯的答案。如果这不是一个答案，我会打上标记的。这就是一个协作社区的工作方式。这是有效的！非常感谢你的帮助，让我投票吧哈哈哈：这很有效！谢谢你的帮助，投我一票吧哈哈哈：D