在鼠標懸停時隱藏圖像

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