Changing frame width with mouse over javascript

Question

Changing frame width with mouse over javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I need to make a javascript code that changes the width of my iframe by hovering over that iframe.

Here is 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

asked by anonymous 16.06.2017 / 19:05

2 answers

Error when using MainActivity method in a fragment [closed] Push ionic screens 3

score 1 · Answer 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://pt.stackoverflow.com"></iframe>

score 0 · Answer 2

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>