Javascript鼠标悬停图像故障

Question

This is what I have so far, I have been watching a ton of Javascript videos and I feel I mimicked them solid but this is still not functioning as I want. 到目前为止，这就是我所看到的，我已经看了很多Java脚本视频，并且感觉很扎实，但是仍然无法正常运行。

Than being, it changes from logo1 to logo2 on mousover. 不仅如此，它在Mousover上从logo1变为logo2。 This is homework. 这是功课。 However homework that is important to me so any help or guidance would be appreciated. 但是，作业对我很重要，因此任何帮助或指导都将不胜感激。

</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>

New Code, its still....not working! 新代码，仍然没有...！ =( =（

</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

Try this: 尝试这个：

<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>

Previously, you we're passing in an id which was not used. 以前，您要传递一个未使用的id 。 Also, the src needs to point to the images/ directory. 此外，src需要指向images/目录。

Answer 2

You need not pass the image element's ID to your imgOver and imgOut functions since the ID never changes, your functions should be changed to: 您无需将图像元素的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
}

Secondly, ensure you specify the correct path to logo1.jpg and logo2.jpg . 其次，确保您指定了logo1.jpg和logo2.jpg的正确路径。 For example: form your original HTML it looks like you'll need to use images/logo1.jpg and images/logo2.jpg respectively. 例如：形成原始HTML，看起来您将需要分别使用images / logo1.jpg和images / logo2.jpg 。

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

Full Source: 完整资料：

<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