Question

我是java脚本的新手，我正在设计我的网站，但是当用户将鼠标悬停在主页上时，我想在我的网页的特定位置加载新图像，这里是代码。

        <html>
        <head>
        </head>
        <body>
        <img src="yourImage.jpg" alt="Home" id="image1" onmouseover="image1.src='home.jpg';" onmouseout="image1.src='myImage.jpg';" /> <br />
        <a href="#" onmouseover=image1.src='home.jpg';" onmouseout="image1.src='yourImage.jpg';">Hoover Me!</a>
        </body>
        </html>

此代码无效。请帮我查找代码中的错误。

Answer 1

在尝试操作之前，您必须使用方法document.getElementById()来获取图像对象：

<body>
    <img src="yourImage.jpg" alt="Home" id="image1" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='myImage.jpg';" /> <br />
    <a href="#" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='yourImage.jpg';">Hoover Me!</a>
</body>

你应该考虑使用JQuery来做这种事情。

Answer 2

image1没有任何意义。你需要使用 document.getElementById('image1').src而非image1.src。
您错过了onmouseover属性的起始引用 a代码。

Answer 3

除了不使用document.getElementById之外，你还会遇到鼠标悬停的延迟，除非图像已预先加载。

Answer 4

您不能将img称为image1.src，首先必须指定image1=document.getElementById('image1')，然后您可以将其称为image1.src。还有一种更简单的方法可以做到这一点。您还可以在JavaScript中将当前图像或对象称为this.src。请参阅更正后的更正代码：

<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="[ Home ]" id="image1" onmouseover="this.src='home.jpg';" onmouseout="this.src='myImage.jpg';" /><br />
<a href="#" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='yourImage.jpg';">Hoover Me!</a>
</body>
</html>

Answer 5

要从其自己的内联属性访问img元素，您需要使用'this'关键字：

<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="this.src='yourOtherImage.jpg';" />

除了内联之外，你还可以像jQuery一样使用javascript库作为详细here，如果你想在以后做更多事情，这会给你更大的灵活性，例如添加动画，但这取决于你和你感觉到多少挑战：）

Javascript在悬停在链接上时加载图片

5 个答案: