在鼠标悬停处隐藏图像

Hide the image onmouseover

本文关键字：隐藏 图像 悬停 鼠标      更新时间：2023-09-26

我希望iframe出现，但图像继续显示如果这有道理的话？我更喜欢在javasript 中完成

<html>  
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","http://www.google.com");
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="images/largepic.jpg" onmouseover=makeFrame() onmouseout=closeFrame() height="100px" width="100px" />
</body>
</html>

`

我建议：

function makeFrame(src) {
    ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.replaceChild(ifrm, document.getElementsByTagName('img')[0]);
}

尽管我建议，在这种情况下，给img元素一个id或以其他方式唯一引用它），以便准确地知道要删除哪个img元素。

相反，如果您只是想在插入iframe后隐藏图像：

function makeFrame(src) {
    ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.insertBefore(ifrm, document.getElementsByTagName('img')[0]);
}

使用CSS：

iframe + img {
    display: none;
}

您还可以将"this"参数传递到closeFrame函数调用中，该函数将为您提供图像元素。然后，您可以在该元素上设置display: none：

<html>  
  <head>
    <script language="JavaScript" type="text/javascript">
    function makeFrame(image_element) { <!-- Take the image_element as a parameter -->
    image_element.style.display = "none"; <!-- Set image element to not display -->
    ifrm = document.createElement("IFRAME");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.appendChild(ifrm);
    }
    function closeFrame(){
    ifrm.style.display = "none";
    }
    </script>
  </head>
  <body>
    <!-- Pass this into makeFrame where this is the image element -->
    <img src="images/largepic.jpg" onmouseover=makeFrame(this) onmouseout=closeFrame() height="100px" width="100px" />
  </body>
</html>

正如Shmiddty所说，一旦将display: none设置为，就会调用closeframe()。您可能希望在iframe本身而不是img元素上设置onmouseout事件。

根据OP的评论更新我的答案：

这是将鼠标移出IFrame时关闭IFrame所需的代码。这也可以恢复原始图像。

<html>  
  <head>
    <script language="JavaScript" type="text/javascript">
    function makeFrame(image_element) { <!-- Take the image_element as a parameter. -->
    image_element.style.display = "none"; <!-- Set image element to not display. -->
    ifrm = document.createElement("IFRAME");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    ifrm.onmouseout=closeFrame; <!-- Close the IFrame when the mouse moves out of it. -->
    document.body.appendChild(ifrm);
    }
    function closeFrame(){
      ifrm.style.display = "none";
      var image_element = document.getElementById("myImg"); <!-- Show the image that was hidden when showing the iframe. -->
      image_element.style.display = "inline";
    }
    </script>
  </head>
  <body>
    <!-- Pass this into makeFrame where this is the image element -->
    <img id="myImg" src="images/largepic.jpg" onmouseover=makeFrame(this) height="100px" width="100px" />
  </body>
</html>

这是通过将onmouseout事件绑定到IFrame来实现的。这告诉浏览器在将鼠标移出IFrame时调用closeFrame函数。在closeFrame函数中，我们将恢复以前隐藏的图像。

相关文章：