Question

我想在悬停时更改图像。我写了以下代码：

<!DOCTYPE html>
<html>
    <head> 
         <title>Selecting Images
         </title>
     </head>
     <body>
            <h1> Image Roll over </h1>

            <a href="#">
                 <img src="first.gif" width="100px" height="50px" name="button"/>
            </a>
            <a href="#"
onmouseover="document.images.button.src='second.gif'"
onmouseout="document.images.button.src='first.jpg' " >
     </body>
</html>

但我无法在页面上加载图像。检查控制台后，我得到以下输出：获取文件：/// C：/Users/Md%203Shahjahan/Documents/mystuff/first.gif net :: ERR_FILE_NOT_FOUND

Answer 1

您的a标记显然错过了结束标记，您还需要为其添加一些文字，如下所示：

<a href="#" onmouseover="document.images.button.src='second.gif'"
            onmouseout="document.images.button.src='first.gif'">Hover me</a>

注意：您不应使用内联脚本。这是demo

看起来你可能想要处理图像本身的悬停，所以它应该是这样的：

<a href="#" onmouseover="document.images.button.src='second.gif'"
            onmouseout="document.images.button.src='first.gif'">
  <img src="first.gif" width="100px" height="50px" name="button"/>
</a>

Updated demo

Answer 2

我会使用css来处理这些而不是javascript它更干净并且它适用于所有浏览器Fiddle demo here

HTML

<h1> Image Roll over </h1>
<a href="#"> </a>

CSS

a {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-image: url('http://placehold.it/100x50');
}

a:hover{
    background-image: url('http://placekitten.com/100/50')
}

在悬停时更改图像

2 个答案: