Javascript鼠标悬停图像故障

Question

到目前为止，这就是我所看到的，我已经看了很多Java脚本视频，并且感觉很扎实，但是仍然无法正常运行。

不仅如此，它在Mousover上从logo1变为logo2。 这是功课。 但是，作业对我很重要，因此任何帮助或指导都将不胜感激。

</head>

<body>
<p>
<div>
<script type="text/javascript">
// Pre load images for rollover
function imgOver(id) 
{
    document.getElementById(id).src="logo1.jpg";
}

function imgOut(id) 
{
    document.getElementById(id).src="logo2.jpg";
}

</script>   
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</div>
</body>

</html>

新代码，仍然没有...！ =（

</head>

<body>
<div>
<p>
<script type="text/javascript">
// Pre load images for rollover
function imgOver() 
{
    document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path
}

function imgOut() 
{
    document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path
}
</script>   
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</p>
</div>
</body>

</html>

Answer 1

尝试这个：

<script type="text/javascript">
// Pre load images for rollover
function imgSwap(imgSrc) 
{
    document.getElementById('logo').src = "images/"+imgSrc+".jpeg";
}

</script>   
<a href="#" onmouseover="imgSwap('Logo1');" onmouseout="imgSwap('Logo2')">
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>

以前，您要传递一个未使用的id 。 此外，src需要指向images/目录。

Answer 2

您无需将图像元素的ID传递给imgOver和imgOut函数，因为该ID从未更改，您的函数应更改为：

function imgOver() {
    document.getElementById('logo').src="logo1.jpg"; // ensure correct image path
}

function imgOut() {
    document.getElementById('logo').src="logo2.jpg"; // ensure correct image path
}

其次，确保您指定了logo1.jpg和logo2.jpg的正确路径。 例如：形成原始HTML，看起来您将需要分别使用images / logo1.jpg和images / logo2.jpg 。

您的图片元素需要有一个ID。 <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />

完整资料：

<script type="text/javascript">
function imgOver() {
    document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path
}
function imgOut() {
    document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path
}
</script>   
<a href="#" onmouseover="imgOver()" onmouseout="imgOut()">
    <!-- note the id="logo" part below -->
    <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>

Javascript鼠标悬停图像故障

问题描述

2 个解决方案

解决方案1
2 2012-11-04 05:03:22

解决方案2
1 已采纳 2012-11-04 05:02:52

Javascript鼠标悬停图像故障

问题描述

2 个解决方案

解决方案1 2 2012-11-04 05:03:22

解决方案2 1 已采纳 2012-11-04 05:02:52

解决方案1
2 2012-11-04 05:03:22

解决方案2
1 已采纳 2012-11-04 05:02:52