在鼠标悬停时隐藏图像

Question

我想让iframe出现，但是如果有意义的话，图像就可以进行鼠标悬停了吗？ id更喜欢在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>

`

Answer 1

我建议：

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

Answer 2

~~您也可以将“ this”参数传递给closeFrame函数调用，该调用将为您提供图像元素。~~ ~~然后，您可以只设置 display: none该元素上 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会立即调用 closeframe() display: none~~ ~~您可能想在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函数中，还原以前隐藏的图像。

在鼠标悬停时隐藏图像

问题描述

2 个解决方案

解决方案1
0 2012-09-04 15:01:28

解决方案2
0 2012-09-04 15:14:50

在鼠标悬停时隐藏图像

问题描述

2 个解决方案

解决方案1 0 2012-09-04 15:01:28

解决方案2 0 2012-09-04 15:14:50

解决方案1
0 2012-09-04 15:01:28

解决方案2
0 2012-09-04 15:14:50