Changing frame width with mouse over javascript

Asked

Viewed 177 times

0

Hello, I need to make a javascript code that changes the width of my iframe when passing the mouse over this iframe.

Here’s the code:

<html>
<head>
<link rel="stylesheet" href="http://www.site.com.br/imagens/style.css">
<meta name="ad.size" content="width=600,height=250">
<script type="text/javascript">
var clickTag = "http://www.site.com.br"; </script>

</head>
<body>
    <div class="container">
        <a href="javascript:window.open(window.clickTag)">
        <img src="http://www.site.com.br/imagens/delta.gif"  class="image; image-a" border="0" />
    <div class="overlay">
        <img src="http://www.site.com.br/imagens/fotogrande.jpg"  border="0" />
        </a>
    </div>
    </div>
</body>
</html>
javascript iframe

  • Change to what value? What is the expected result?

  • The initial iframe is structured with 300x250, through the mouseover the iframe should change to 600x20 (width x Heigh). I need this over function that causes the width of the iframe to change, when the mouse leaves the iframe area the size goes back to the initial.

  • Select all the source code, then click the button { } for it to appear formatted.

  • Thank you. I’ve already put the code :)

2 answers

1

you get this effect with the following css.:

#meuframe {
  background-color: whitesmoke;
  border: 0px solid transparent;
  box-shadow: 0px 0px 5px black;
  border-radius: 5px;
}

#meuframe {
  width: 300px;
  height: 250px;
  transition: width 500ms linear, height 500ms linear 500ms;
}

#meuframe:hover {
  width: 600px;
  height: 125px;
  transition: height 500ms linear, width 500ms linear 500ms;  
}
<iframe id="meuframe" src="https://answall.com"></iframe>

0

Or with javascript:

var frame = document.getElementById('frame');
frame.onmouseover = function() {
  frame.style.width = '600px';
  frame.style.height = '20px';
}
#frame {
  width: 300px;
  height: 250px;
}
<iframe id='frame' src="https://www.w3schools.com"></iframe>

  • So should I have two index.html? One with my main code and the other with the js function and the iframe tag? Or is it all in one page?

  • The code that changes the frame should go to the page that contains the @Mab frame. The page that will go to src frame is another, yes.

  • Right, that’s what I did. But it didn’t work, it loads the page in iframe but with the bar height and width, with height less than 250px. Not adjusting the frame when passing the mouse :(

  • Can create a Fiddle @Mab?

  • I did.. but on Fiddle it worked. When I put the files online, it doesn’t work properly. Look at print. http://prntscr.com/fknkd8

Browser other questions tagged javascript iframe

You are not signed in. Login or sign up in order to post.