0

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>

`

4

2 に答える 2

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 に答える
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()ように、 as を設定するとすぐに が呼び出されますdisplay: none。おそらく、img 要素ではなく、iframe 自体に 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 に答える