Question

我正在创建一个非常简单的Javascript翻转效果：鼠标悬停一个单词并在页面上交换图像。 mouseOut并返回原始图像。作为JavaScript的新手，当我理解足以使初始交换发生时，我感到非常激动。如何在mouseOut上返回原始图像使我望而却步。宝贝代码：

<head>
<script>
function mOver(obj)
{
document.getElementById("img1").src="image2.jpg";
}

function mOut(obj)
//not certain what goes here…..
</script>
</head>

<body>

     <div>
    <p1 onmouseover="mOver(this)" onmouseout="mOut(this)"> ROLLOVER </p1>
     </div>

     <div id="image">
    <img id="img1" src="image1.jpg" alt="imag1">
     </div>

</body>

我对上述内容的理解：滚动p1标签会导致mouseOver事件处理程序调用一个函数（使用DOM）切换原始图像的源属性以进行图像切换。似乎不可能在mouseOut上执行相反操作，因为交换的图像（不在文档中）无法使用正确的ID进行寻址。我确信有多种方法可以做到这一点。如果有人能帮助这个年轻人，我会很感激。我非常感兴趣进一步了解Javascript。

Answer 1

您对序列的理解是正确的：事件发生，事件由函数处理，函数更改图像源

但是当您更改图像.src时，不更改ID - DOM元素<img>保持不变，只更改了源代码，因此您仍然可以访问它原始ID：

function mOut() {
   document.getElementById("img1").src="image1.jpg";
}

非常简单的脱节翻转图像交换

1 个答案: