Question

I have two iframes next to each other at 50% width and am wondering if it s possible to resize one iframe to 80% when that iframe is moused over. Is it possible? If so, can someone post a small how-to on getting this to work?

Answer 1

I tried this in Firefox:

<html lang="en">
    <head>
        <title>iframes</title>
    </head>
    <body>
      <div id="container">
        <iframe id="ifr1" style="width:45%;margin:0">a</iframe>
        <iframe id="ifr2" style="width:45%;margin:0">b</iframe>
      </div>
      <script>
        var dv = document.getElementById( container ),
            ifr1 = document.getElementById( ifr1 ), 
            ifr2 = document.getElementById( ifr2 );
            swapWidth = function(id){
                if(id ===  ifr1 ){
                    ifr2.style.width =  15% ;
                    ifr1.style.width =  75% ;
                }else{
                    ifr1.style.width =  15% ;
                    ifr2.style.width =  75% ;
                }
            };
        dv.onmouseover = function(ev){
            ev = ev || window.event;
            var elm = ev.target || ev.srcElement;
            swapWidth(elm.id);
        };
      </script>
    </body>
</html>

EDIT: add code for IE

友情链接