Home/ Questions/Q 8487437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T21:14:22+00:00

I am trying to set up an image that, when clicked, opens an iframe

  • 0

I am trying to set up an image that, when clicked, opens an iframe that gradually gets bigger, then closes onmouseout. Here is what I have so far:

<html>  
<head>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
function grow() {
    ifrm = document.getElementById('amazingIFrame');
    if (ifrm.style.width < 500) {
        ifrm.style.width += 10;
    } else {
        clearInterval(interval);  // stop growing when it's big enough
    }
}
function startGrow() {
    interval = setInterval("grow()", 10);  // repeat every 10 ms
}
</script>

</head>
<body>
<img src="" onclick="makeFrame()" "height="100px" width="100px" />

</body>
</html>

This doesn’t work, though. Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a couple issues.

    • you never call startGrow().
    • the iframe is already sized above 500px when you create it
    • ifrm.style.width < 500 is not right. ifrm.style.width will include the px, so you’ll be comparing 10px with 500…
    • the setInterval syntax is incorrect. Should be setInterval(grow, 10);
    • height has a double quote before it
    • you’re not passing any parameters, so src is going to be null (really just unnecessary).

    Try like this

    function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 0;
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
startGrow();
}
function closeFrame(){
ifrm.style.display = "none";
}
function grow() {
    ifrm = document.getElementById('amazingIFrame');
    var width = parseInt(ifrm.style.width.replace("px",""));
    if (width < 500) {
        ifrm.style.width = (width + 10) +"px";
    } else {
        clearInterval(interval);  // stop growing when it's big enough
    }
}
function startGrow() {
    interval = setInterval(grow, 10);  // repeat every 10 ms
}
    • 0