0

我希望 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>

`

4

2 回答 2

0

您还可以将“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 所说，closeframe()一旦你设置display: none为 ，就会被调用。您可能想在 iframe 本身而不是 img 元素上设置 onmouseout 事件。

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

这是将鼠标移出时关闭 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 来实现的。closeFrame这告诉浏览器在将鼠标移出 IFrame 时调用该函数。然后在closeFrame函数中恢复之前隐藏的图像。

于 2012-09-04T15:14:50.693 回答
0

我建议：

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;
}
于 2012-09-04T15:01:28.427 回答