0

到目前为止，这就是我所拥有的，我一直在观看大量的 Javascript 视频，我觉得我模仿它们很可靠，但这仍然没有按我想要的方式运行。

不是，它在鼠标悬停上从 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>
4

2 回答 2

2

试试这个：

<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/目录。

于 2012-11-04T05:03:22.910 回答
1

您不需要将图像元素传递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>
于 2012-11-04T05:02:52.273 回答