Question

我正在尝试制作一个按钮，当按下该按钮时，应该更改旁边的图片，然后当您没有按住按钮时，它将位于原始图像上。现在它出现了按钮和图像，并且知道按钮的图片是按钮但不会改变图像。

<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
    var button=document.images["button"];
    function handleMDown()
    {
        document.getElementById("imagechange").src="red.jpg";
        return true
    }
    function handleMUp()
    {
        document.getElementById("imagechange").src="green.jpg";
        return true;
    }
</script>
</head>
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="return handleMDown()" onmouseup="return handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"  
  border="0" alt="javascript button" onmousedown="return handleMDown()" 
  onmouseup="return handleMUp"></a>
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>

Answer 1

所以这就是事情：

首先，如Petr Felzmann所述

语法错误：缺少变量名称：var = document.images [＆＃34; goo.gl/jjOUxT"]

其次，在onmousedown＆amp;您可以通过onmouseup或handleMDown();而不是handleMUp();来调用此函数的return handleMDown()个事件。

最后但并非最不重要的是，我已经改变了一些图像，这只是我可以正确测试它，但据我所知，这是你基本上想要的：

<强> HTML

<body>
    <h1>Click in button</h1>
    <a href="#"onmousedown="handleMDown();" onmouseup="handleMUp();"> 
    <!-- Changed the onmousedown & onmouseup to handleMDown(); or handleMUp(); accordingly -->
    <img id="button" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown();" onmouseup="handleMUp();"></a>
    <!-- Changed the onmousedown & onmouseup to handelMDown(); or handleMUp(); accordingly -->
    <img id="imagechange" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height=" 220" alt="image">
</body>

<强>的Javascript

function handleMDown() {
    document.getElementById("imagechange").src="http://www.veryst.com/_Images/Material%20Testing%20--%20Modeling%20Services/Small%20punch%201.png";
    return true
}
function handleMUp()
{
    document.getElementById("imagechange").src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" ;
    return true;
}

不要忘记在Javascript和HTML中更改图片

希望这有帮助！

Answer 2

你应该在关闭body标签之前放入脚本标签：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

</head>
<body>
    <h1>Click in button</h1>
    <a href="#" onmousedown="handleMDown()" onmouseup="handleMUp()">
        <img id="button" src="http://goo.gl/VqDdz0" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp">
    </a>
    <img id="imagechange" src="green.jpg" width="220" height=" 220" alt="image">
    <script>
    var button= document.images["button"];



    var e =document.images["http://goo.gl/jjOUxT"]

    function handleMDown()
    {document.getElementById("imagechange").src="red.jpg";

    return true
    }
    function handleMUp()
    {
        document.getElementById("imagechange").src="green.jpg" ;
        return true;
    }

    </script>
</body>
</html>

Answer 3

你尝试了太多，你可以做得更简单。我将它剥离到最低限度：更改大红色按钮右侧的图像。我也删除了链接，只要你需要就把它添加回来。

<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
function handleMDown()
{
  document.getElementById("imagechange").src="red.jpg";
}
function handleMUp()
{
  document.getElementById("imagechange").src="green.jpg" ;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"  
 border="0" alt="javascript button" onmousedown="handleMDown()" 
 onmouseup="handleMUp()">
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>

事件处理程序（onthingy属性，如果你原谅我的简化）不会使用他们调用的函数的任何返回，他们只是调用它们。如果你想调用函数（function fun(){...})，你需要在函数名的末尾添加()，你忘了在一个地方。

Answer 4

您可以使用onmousedown和onmouseup来处理这些事件

document.getElementById('red').onmousedown = function () {
    document.getElementById('red').style.backgroundColor = 'red';  
};

document.getElementById('red').onmouseup = function () {
    document.getElementById('red').style.backgroundColor = 'blue';
};

http://jsfiddle.net/kdyr8owk/

Answer 5

将您的HTML代码更改为：

<img id="button" src="http://goo.gl/VqDdz0" style="width: 220px; height: 220px; border: 0;" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="imagechange" src="put your NOT holding button down source here" alt="image" style="width: 220px; height: 220px;">

请注意，我更改了您的HTML代码，以符合今天使用CSS来设置元素样式的标准。

将您的JavaScript代码更改为：

function handleMDown() {
    document.getElementById("imagechange").src="put your holding button down source here";
}

function handleMUp()
{
    document.getElementById("imagechange").src="put your NOT holding button down source here";
}

查看小提琴here。

按住按钮时更改图像的java脚本按钮

5 个答案: